vue-router 学习

Vue 插件

路由

路由原理

• 传统的开发方式是URL修改后发起请求，响应整个页面，渲染整个页面
• SPA锚点值改变后不发起请求，而是发起ajax请求，局部改变页面数据（页面不跳转）

SPA

SPA是single page application，即单页应用程序 前端路由：

1. 锚点值监视
2. Ajax获取动态数据
3. 核心点是锚点值

基础前端路由实例

    <a href="#login">点我登录</a>
    <a href="#register">点我注册</a>

    <div id="msg"></div>

    <script>
        let msg = document.getElementById('msg')
        // hashchange事件，url上的锚点数据改变，可以获取这个事件，达到url的改变而不刷新页面
        window.addEventListener('hashchange', function() {
            switch(location.hash) {
                case '#login' :
                    msg.innerHTML = '<h1>点我登录</h1>'
                    break
                case '#register' :
                    msg.innerHTML = '<h1>点我注册</h1>'
                    break
                default :
                    msg.innerHTML = '<h1>未找到页面</h1>'
            }
        })
    </script>

vue-router路由

官网下载地址：https://unpkg.com/vue-router/dist/vue-router.js
也可通过npm指令下载：npm install vue-router  --save-dev 

1. 引入vue-router核心插件
2. 创建路由对象
3. 配置路由对象
4. 安装插件
5. 将配置好的路由对象关联到vue实例中
6. 指定路由改变的局部位置

router-link

类似于html的标签，to属性替换了a标签href属性

路由命名规则

1. 给路由对象一个名称
2. 在router-link属性中描述这个规则（通过name找路由对象和path）

    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入vue核心插件 -->
    <script src="../vue-router.js"></script>

    <script>
        // 测试案例
        let Login = {
            template: `
                <div>
                    我是登录界面
                </div>
            `
        }

        // 安装插件
        Vue.use(VueRouter)
        // 创建vue对象
        let router = new VueRouter({
            // 配置路由对象,注意是routes不是routers!!!!!!!!!!!!
            // path是url地址，component是调用的子组件，name是改路由的变量名，router-link直接映射name即可
            routes: [ { name: 'login', path:'/mylogin', component: Login  } ]
        })

        // 指定路由改变局部位置
        let App = {
            template: `<div>
                <!-- router内置组件,通过路由的name调用，而不是直接通过url去调用，便于维护
                防止将{name:login}当作字符串处理，应当加个v-bind(:) -->
                <router-link :to="{ name: 'login' }">登录</router-link>
                <router-view></router-view>
            </div>`
        }

        new Vue({
            el: '#app',
            // 将配置好的路由对象关联到Vue实例中,如果没有这句，运行时会报underfinded对象中我去不到matched
            router: router,
            components: {
                app: App
            },
            template: `
                <div>
                    <app/>
                </div>
            `
        })
    </script>

router-link参数

    Vue.prototype.xxx = {add:fn}

所有组件中，使用this.xxx就能拿到这个对象

query查询字符串

1. 配置：:to="{ name: ‘login’, query: {id: 1} }"
2. 规则：{ name: ‘login’, path:’/mylogin’, component: Login }
3. 获取：this.$route.query.id
4. 生成：/mylogin?id=1

path方式（params）

1. 配置：:to="{ name: ‘register’, params: {name: ‘abc’} }"
2. 规则：{ name: ‘register’, path: ‘/myregister/:name’, component: Register}
3. 获取：this.$route.params.name
4. 生成：/myregister/abc

vue-router中的对象

• $route 路由信息对象，只读对象
• $router 路由操作对象，只写对象

多嵌套路由

多个组件，按照不同的锚点值部分，填入不同的坑；router-view中包含router-view，路由规则中存在子路由

     <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="../vue-router.js"></script>
        <script>
            Vue.use(VueRouter)

            let Login = {
                template: `
                    <div>
                        <h1>我是登录界面</h1>
                        <router-view></router-view>
                    </div>
                `
            }

        let Woman = {
            template: `<div>
                <h1>woman</h1>
            </div>`
        }

        let router = new VueRouter({
            routes: [
                {name:'login', path:'/login', component: Login, children: [
                    {
                        name: 'login.woman', path: 'woman', component: Woman
                    }
                ]}
            ]
        })

        let App = {
            template: `
                <div>
                    <router-link :to="{name:'login'}">登录</router-link>
                    <router-link :to="{name:'login.woman'}">woman</router-link>
                    <router-view></router-view>
                </div>
            `
        }

        new Vue({
            el: '#app',
            router: router,
            components: {
                app: App
            },
            template: '<app/>'
        })
        </script>

路由meta元数据

meta是对于路由规则是否需要验证权限的配置

• 路由对象中和name属性同级 {meta:{isChecked:true}}

路由钩子

权限控制的函数执行时期

• 每次路由匹配后，渲染组件到router-view之前
• router。beforeEach(function(to, from, next) {} )

    <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="../vue-router.js"></script>
        <script>
            Vue.use(VueRouter)
            let isLogin = false

            let Login = {
                template: `
                    <div>
                        <h1>我是登录界面</h1>
                        <router-view></router-view>
                    </div>
                `,
                created: function() {
                    isLogin = true
                }
            }

        let Music = {
            template: `<div>
                <h1>music</h1>
            </div>`
        }

        let router = new VueRouter()
        // 可以多次的追加路由规则，动态的获取路由规则，更为灵活，可以在调用后追加路由规则
        router.addRoutes([
                // 默认首页重定向
                {name:'/', path: '', redirect: {name:'login'}},
                {name:'login', path: '/login', component: Login},
                // meta: {isChecked:true}给未来的路由权限控制，全局路由守卫来做参照
                {name: 'music', path: '/music', component: Music, meta: {isChecked:true}}
            ])

        router.beforeEach(function(to, from, next) {
            if (!to.meta.isChecked) {
                // 不传参，放行
                // next(false)取消用户导航行为，相当于什么都没发生
                next()
            } else {
                if (isLogin) {
                    next()
                } else {
                    alert('你没有登陆')
                    // 重定向到登陆界面
                    next({name: 'login'})
                }
            }
            // 该方法类似于nextTick()，如果没有这个方法，上面命令则不会执行
        })

        let App = {
            template: `
                <div>
                    <router-link :to="{name:'login'}">登录</router-link>
                    <router-link :to="{name:'music'}">music</router-link>
                    <router-view></router-view>
                </div>
            `
        }

        new Vue({
            el: '#app',
            router: router,
            components: {
                app: App
            },
            template: '<app/>'
        })
        </script>

编程导航

跳转指定的锚点，并显示页面

    this.$router.push({name:'xxx', query:{id:1}, params:{name:'abc'}})

配置规则

    {name:'abc', path:'/xxx/:name'}

根据历史记录前进或后退，1代表进一步，-1代表退一步

    this.$router.go(-1|1)