Vue学习之旅Part16：Vue结合webpack使用vue-router实现路由和子路由
一、使用vue-router实现路由
由于是通过vue-router实现的路由 因此 须先安装vue-router：
Piconjo_Official
原创文章 228获赞 33访问量 168万+
关注
私信
展开阅读全文
作者：Piconjo_Official
输入cnpm i vue-router -S以安装vue-router包
导入VueRouter的包之前 必须先导入Vue的包：
import Vue from "vue"
import VueRouter from "vue-router"
然后手动调用Vue.use()方法 将vue-router安装到Vue上：
Vue.use(VueRouter)
创建路由对象VueRouter：
// 导入account组件
import account from "./main/Account.vue"
// 导入goodslist组件
import goodslist from "./main/GoodsList.vue"
var router=new VueRouter({
routes:[
// 定义路由规则
{path:"/account",component:account},
{path:"/goodslist",component:goodslist}
]
})
将路由对象挂载到Vue实例上：
var vm=new Vue({
el:"#app",
render:create=>create(app),
// 挂载路由对象
router
})
展示在页面上：
注：因为render会将el属性指定的容器里面的所有内容全部都清空覆盖
因此 不能将路由的和标签直接写到el属性所控制的元素中 否则是不会显示的
因此 可以将路由的和标签写到App.vue组件里
这样 当app组件展示出来时 就必然能看到路由的内容了
App.vue：
This is App component
account
goodslist
export default {
}
在上面的案例中：
App.vue组件是通过vm实例的render函数渲染出来的
render函数若要渲染组件 则渲染出的组件只能放到el属性所指定的元素中去
而Account和GoodsList组件是通过路由匹配监听到的 因此这两个组件只能展示到路由的标签里
main.js：
import login from "./subcomponent/login.vue"
import register from "./subcomponent/register.vue"
配置路由对象：
var router=new VueRouter(
{
routes:[
// 定义路由规则
{
path:"/account",
component:account,
// 子路由(path前面不带斜杠)
children:[
{path:"login",component:login},
{path:"register",component:register}
]
},
{path:"/goodslist",component:goodslist}
]
})
在父组件的内部HTML代码区定义子组件：
Account.vue：
This is Account component
login
register
export default {
}
三、抽离路由模块
导入组件和创建路由对象的代码过于冗长 可进行抽取 使代码更加简洁
抽离前：main.js：
// 导入Vue
import Vue from "vue"
// 导入VueRouter路由
import VueRouter from "vue-router"
// 手动安装vue-router
Vue.use(VueRouter)
// 导入app组件
import app from "./App.vue"
// 导入account组件
import account from "./main/Account.vue"
// 导入goodslist组件
import goodslist from "./main/GoodsList.vue"
// 导入account的子组件
import login from "./subcomponent/login.vue"
import register from "./subcomponent/register.vue"
// 创建路由对象
var router=new VueRouter(
{
routes:[
// 定义路由规则
{
path:"/account",
component:account,
// 子路由(path前面不带斜杠)
children:[
{path:"login",component:login},
{path:"register",component:register}
]
},
{path:"/goodslist",component:goodslist}
]
})
var vm=new Vue({
el:"#app",
render:create=>create(app),
// 挂载路由对象
router
})
抽离后：
分成了两个js文件 router.js文件专门用于存放路由相关的代码
然后再在main.js里导入router.js暴露的路由模块即可
router.js：
// 导入VueRouter路由
import VueRouter from "vue-router"
// 导入account组件
import account from "./main/Account.vue"
// 导入goodslist组件
import goodslist from "./main/GoodsList.vue"
// 导入account的子组件
import login from "./subcomponent/login.vue"
import register from "./subcomponent/register.vue"
// 创建路由对象
var router=new VueRouter(
{
routes:[
// 定义路由规则
{
path:"/account",
component:account,
// 子路由(path前面不带斜杠)
children:[
{path:"login",component:login},
{path:"register",component:register}
]
},
{path:"/goodslist",component:goodslist}
]
})
// 将路由对象暴露出去
export default router;
main.js：
// 导入Vue
import Vue from "vue"
// 导入VueRouter路由
import VueRouter from "vue-router"
// 手动安装vue-router
Vue.use(VueRouter)
// 导入app组件
import app from "./App.vue"
// 导入自定义的路由模块
import router from "./router.js"
var vm=new Vue({
el:"#app",
render:create=>create(app),
// 挂载路由对象
router
})
Piconjo_Official
原创文章 228获赞 33访问量 168万+
关注
私信
展开阅读全文
作者：Piconjo_Official
