二级路由、路由跳转、 this.$router与 this.$route

1.二级路由

1.1 二级路由

二级路由相当将一级路由的某个组件看作使根组件，然后创建前端路由即可；

1.2 实现步骤

由于一级路由已经引入vue-router的js文件，并将路由对象绑定在根节点上；

所以相比于创建路由，步骤有所精简；

1. 在vue某一个想要在其内部添加二级路由的组件内部中template字段下，添加router-link标签对，并设置其to属性；

2. 在这个template字段下添加router-view标签对，用来显示二级路由；

3. 在js中创建变量接受vue.component()组件对象(构造函数)；

4. 在路由配置对象中，这个想要添加二级路由的组件内部添加children字段的数组，在该数组总添加子路由的匹配规则；可以将children类比为组件中的routes；设置子路由的path属性时可以把/去掉；

级路由的路径规范一般都是 一级路由/二级路由；

1,.3 代码演示

a标签加href属性与router-link 加to属性一样都能实现效果;

<div id="app">
    <a href="#/main">主页</a>
    <a href="#/user">用户</a>
    <a href="#/login">登录</a>

    <router-link to="/main">主页</router-link>
    <router-link to="/user">用户</router-link>
    <router-link to="/login">登录</router-link>

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

var Home = Vue.component('homeCom', {
    template: `<h1>我是主页</h1>`
})
var Login = Vue.component('loginCom', {
    // 设置二级路由的时候 二级路由的路径规范一般都是有一级路由/二级路由
    // 1.二级路由的组件出口标签添加到login组件里
    template: `<div>
        <h1>我是登录</h1>
        <router-link to="/login/qq">qq登录</router-link>
        <router-link to="/login/weChat">微信登录</router-link>
        <router-link to="/login/tel">手机验证码登录</router-link>
        
        <router-view></router-view>
        </div>`
})
var User = Vue.component('userCom', {
    template: `<h1>我是用户</h1>`
})
var NotFound = Vue.component('notFound', {
    template: `<h1>Not Fount 404</h1>`
})
// 2.二级路由界面
var QQ = Vue.component('qqCom', {
    template: `<h2>QQ登录</h2>`
})
var tel = Vue.component('telCom', {
    template: `<h2>手机登录</h2>`
})
var weChat = Vue.component('weChatCom', {
    template: `<h2>微信登录</h2>`
})

var router = new VueRouter({
    routes: [
        {
            path: '/main',
            component: Home
        },
        {
            path: '/login',
            component: Login,
            // 3.设置组件下的子路由的匹配规则
            // 设置子路由的path的时候，可以把/去掉,访问的时候需要拼上一级路由
            children:[
                {
                    path:'qq',
                    component:QQ
                },
                {
                    path:'tel',
                    component:tel
                },
                {
                    path:'weChat',
                    component:weChat
                }
            ]

        },
        {
            path: '/user',
            component: User
        },
        {
            path: '/',
            redirect: '/home'
        },
        // 404 一般定义在路由匹配关系的最后面
        // path:'*' / path:"*" 匹配所有的路由地址，如果要路由地址被前面的匹配规则匹配上，这时候显示所对应的组件，
        //不会再往下进行匹配，如果当前路由没有匹配到，往下一直找匹配，直到找到*为止。

        {
            path:'*',
            component:NotFound
        }
    ]
})

new Vue({
    el: '#app',
    data: {

    },
    router
})

2. 路由跳转 

2.1 路由跳转的分类

路由跳转分为两类：1.声明式导航跳转：使用router-link加to属性或者a标签加href属性实现；

2.编程式导航跳转：触发事件绑定的函数；执行根组件的methods字段中定义的方法；使用路由对象的push、back、replace等函数来实现；

 2.2 路由跳转的代码演示

<div id="app">
    <a href="#/main">主页</a>
    <a href="#/user">用户</a>
    <a href="#/login">登录</a>

    <!--1. 使用router-link 实现路由跳转的方式为声明式导航跳转 -->
    <router-link to="/main">主页</router-link>
    <router-link to="/user">用户</router-link>
    <router-link to="/login">登录</router-link>
    
    <!--2. 使用js实现跳转方式为编程式导航跳转 -->
    <button @click="goMain">主页的方法</button>

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

//router 为已经创建好的路由对象
new Vue({
    el: '#app',
    data: {

    },
    methods: {
        goMain() {
            // 1.跳转方式一 使用router对象的push，参数式路由地址
            // router.push('/home')

            // 2 跳转方式二 push() 的参数式对象,对象里添加path:'/home';
            // router.push({
            //     path:'/home',
            // })

            // 3. 跳转方式三 push() 可以使用命名路由进行条i转 参数式路由名称
            // router.push({
            //     name:'main',
            // })

            // 返回上一个路由页面
            // router.back();

            // replace() 替换,不会存在历史记录种
            // router.replace('/home')

            // this.$router 全局的路由器对象 router全局路由器对象
            // 在这里可以使用this.$router 在外部最好使用router
            console.log(this.$router===router,router);

            // this.$route 当前的路由器对象信息
            console.log(this.$route);

            // 注意 编程式导航跳转,当前页跳转到当前页会报错,
            if (this.$route.path != '/home') {
                this.$router.push('/home');
            }
        }
    },
    router
})

3. this.$router 和 this.$route的区别

 this.$router===new VueRouter 全局路由器对象 包含各个组件的路由对象信息
this.$route 当前页的路由对象