安装vue-router
cnpm i vue-router -S
image.png
GoodsList.vue
<template>
<div>
<h1>这是 GoodsList 组件</h1>
</div>
</template>
Account.vue
<template>
<div>
<h1>这是 Account 组件</h1>
</div>
</template>
main.js
// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 1.导入VueRouter包
import VueRouter from 'vue-router'
// 2.手动安装VueRouter
Vue.use(VueRouter)
// 导入组件模块
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 3.创建路由对象
const router = new VueRouter({
routes : [
// account goodlist
{path : '/account',component : account},
{path : '/goodslist',component : goodslist},
]
})
var vm = new Vue({
el : '#app',
data : {},
// 注意：这里不要使用components注册组件，选择使用render函数
render : c => c(App),
router,// 4.将router对象赋给vm实例
})
注意：路由路径匹配规则以为着有 router-link和router-view，那么它们在哪里呢？
因为我们使用render函数将App.vue组件渲染进了index.html中的<div id="app"></div>中，App.vue会覆盖<div id="app"></div>中写的所有内容，所以我们只需要在App.vue中补写切换组件代码即可
App.vue
<template>
<div>
<h1>这是 App 组件</h1>
<router-link to="/account">account组件</router-link>
<router-link to="/goodslist">account组件</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
运行cnpm run dev查看
webpack实现子路由
准备自组件
image.png
Login.vue
<template>
<div>
<h3>这是 Account -- 登录 子组件</h3>
</div>
</template>
Register.vue
<template>
<div>
<h3>这是 Account -- 注册 子组件</h3>
</div>
</template>
Account.vue
<template>
<div>
<h1>这是 Account 组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
main.js
// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 1.导入VueRouter包
import VueRouter from 'vue-router'
// 2.手动安装VueRouter
Vue.use(VueRouter)
// 导入组件模块
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 导入自组件
import login from './subcomponents/Login.vue'
import register from './subcomponents/Register.vue'
// 3.创建路由对象
const router = new VueRouter({
routes : [
// account goodlist
{
path : '/account',
component : account,
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register},
]
},
{path : '/goodslist',component : goodslist},
]
})
var vm = new Vue({
el : '#app',
data : {},
// 注意：这里不要使用components注册组件，选择使用render函数
render : c => c(App),
router,
})
运行cnpm run dev查看
样式style的处理
<template>
<div>
<h3>这是 Account -- 登录 子组件</h3>
</div>
</template>
<style scoped lang="sass"> /* scoped的意思是 样式 只作用于当前组件，lang的意思是语言，因为除了css还有sass等语法 */
div{
color:red;
}
</style>
抽离路由模块
现在在我们的项目中main.js比较庞杂，我们应该把路由部分抽离成单独的js文件
image.png
router.js
import VueRouter from 'vue-router'
// 导入组件模块
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 导入自组件
import login from './subcomponents/Login.vue'
import register from './subcomponents/Register.vue'
// 3.创建路由对象
const router = new VueRouter({
routes : [
// account goodlist
{
path : '/account',
component : account,
children : [
{ path : 'login' , component : login},
{ path : 'register' , component : register},
]
},
{path : '/goodslist',component : goodslist},
]
})
export default router // 将router对象暴露出去
main.js
// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 1.导入VueRouter包
import VueRouter from 'vue-router'
// 2.手动安装VueRouter
Vue.use(VueRouter)
// 导入router模块
import router from './router.js'
var vm = new Vue({
el : '#app',
data : {},
// 注意：这里不要使用components注册组件，选择使用render函数
render : c => c(App),
router,
})
