Vue学习之旅Part16：Vue结合webpack使用vue-router实现路由和子路由

一、使用vue-router实现路由

由于是通过vue-router实现的路由 因此 须先安装vue-router：

输入cnpm i vue-router -S以安装vue-router包

然后 在main.js里导包：

导入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属性指定的容器里面的所有内容全部都清空覆盖
因此 不能将路由的<router-view>和<router-link>标签直接写到el属性所控制的元素中 否则是不会显示的

因此 可以将路由的<router-view>和<router-link>标签写到App.vue组件里
这样 当app组件展示出来时 就必然能看到路由的内容了

App.vue：

<template>
    <div>
        <h1>This is App component</h1>

        <router-link to="/account">account</router-link>
        <router-link to="/goodslist">goodslist</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

在上面的案例中：
App.vue组件是通过vm实例的render函数渲染出来的
render函数若要渲染组件 则渲染出的组件只能放到el属性所指定的元素中去

而Account和GoodsList组件是通过路由匹配监听到的 因此这两个组件只能展示到路由的<router-view>标签里

---

二、使用vue-router实现子路由

导入子组件：

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：

<template>
    <div>
        <h1>This is Account component</h1>

        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>

        <!-- 子组件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

三、抽离路由模块

导入组件和创建路由对象的代码过于冗长 可进行抽取 使代码更加简洁

抽离前：

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
})

---