Vue-Router的使用Part__02

最新推荐文章于 2020-12-03 14:04:09 发布

Mark Huo

最新推荐文章于 2020-12-03 14:04:09 发布

阅读量134

点赞数

分类专栏： Vue

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue路由02

动态路由匹配

结论一：当2个路由使用2个不同的组件时，在来回切换路由的时候组件会反复的创建销毁。

结论二：当2个路由使用相同的组件时，在来回切换路由的时候，为了维持性能，组件会复用，意思是生命周期只会执行一次。

所以当2个路由对应同一个组件时，我们可以通过watch检测$route属性来查看路由的变化以做出相应的调整。

    watch:{
            '$route'(to,from){
                console.log(to)  //到哪里去 routes对象
                console.log(from) //从哪里来
                this.msg = to.params.id
                //发送ajax请求
            }
        }

重定向

https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#重定向

keep-alive在路由中的使用

keep-alive使得路由出口中的组件不会再频繁的创建和销毁，而是会保存状态，并触发activated和deactivated方法

  <keep-alive>
    <router-view></router-view>
  </keep-alive>

使用meta元数据进行权限控制

模仿点击我的博客时，如果没有登录则跳转到登录页面，登录之后才能跳转到博客界面

在博客路由中使用元数据

{
    path:"/blog",
    name:"blog",
    component:Blog,
    //给未来的路由做权限控制
    meta:{
        // 证明，用户访问该组件的时候需要登录
        auth:true
    }
}

使用router.beforeEach方法

该方法在每次路由进行切换前都会调用，重写该方法时一定要加上next()，否则页面会一直hang住

   //在每次路由切换前都会执行
    // 注意必须写next方法，否则会hang住
    router.beforeEach((to,from,next)=>{
        console.log(to)
        console.log(from)

        if(to.meta.auth){
            //用户点击了博客链接，验证是否登录
            if(localStorage.getItem('user')){
                //用户已经登录，直接放行
                next()
            }else {
                next('/login')
            }
        }else {
            // 是其他路由，直接放行
            next()
        }
    })

在login中，当登录成功后设置编程式导航到博客界面

template: `
    <div>
        <h2>我是登录页面</h2>
        用户名：<input type="text" v-model="name"/>
        密码：<input type="text" v-model="pwd"/>
        <button @click="login">登录</button>
    </div>
`,
methods:{
    login(){
        //设置登录信息
        localStorage.setItem('user',{name:this.name,pwd:this.pwd})
        // 跳转到博客页面
        // 编程式导航
        this.$router.push({
            path:"/blog"
        })
    }
}

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<body>
<div id="app" >
    <App></App>

</div>

<script>
    //让vue使用vue-router
    Vue.use(VueRouter)

    //创建Login对象
    var Login = {
        data(){
            return{
                name:'',
                pwd:''
            }
        },
        template: `
                <div>
                    <h2>我是登录页面</h2>
                    用户名：<input type="text" v-model="name"/>
                    密码：<input type="text" v-model="pwd"/>
                    <button @click="login">登录</button>
                </div>
        `,
        methods:{
            login(){
                //设置登录信息
                localStorage.setItem('user',{name:this.name,pwd:this.pwd})
                // 跳转到博客页面
                // 编程式导航
                this.$router.push({
                    path:"/blog"
                })
            }
        }
    }

    //创建Register对象
    var Blog = {
        template: `
            <h2>我是博客页面</h2>
        `
    }

    //Home 首页
    var Home = {
        template: `
            <h2>我是主页</h2>
        `
    }

    //创建vue-router对象
    var router = new VueRouter({
        //配置路由
        routes:[
            { //重定向
              path:"/",
              redirect:"/home"
            },
            {
                path:"/home",
                name:"home",
                component:Home
            },

            //路由匹配规则,路径加子组件名
            {
                path:"/login",
                name:"login",
                component:Login,

            },
            {
                path:"/blog",
                name:"blog",
                component:Blog,
                //给未来的路由做权限控制
                meta:{
                    // 证明，用户访问该组件的时候需要登录
                    auth:true
                }
            }
        ]
    })

    //在每次路由切换的时候都会执行
    // 注意必须写next方法，否则会hang住
    router.beforeEach((to,from,next)=>{
        console.log(to)
        console.log(from)

        if(to.meta.auth){
            //用户点击了博客链接，验证是否登录
            if(localStorage.getItem('user')){
                //用户已经登录，直接放行
                next()
            }else {
                next('/login')
            }
        }else {
            // 是其他路由，直接放行
            next()
        }
    })


    // 使用router-link 他最终会被渲染成a标签
    // router-view 相当于一个占位符，用于展示被匹配路径匹配到的组件中的内容(路由组件的出口)
    var App = {
        template: `<div>
                         <router-link :to="{name:'home'}">首页</router-link>
                         <router-link :to="{name:'blog'}">我的博客</router-link>
                         <router-view></router-view>
                    </div>`,
    }

    // 创建根实例
    new Vue({
        el: '#app',
        data:{
            messagec:'',
        },
        components: {
            App
        },
        //吧router交给根组件管理
        router:router
    })
</script>
</body>
</html>

Mark Huo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-Router的使用Part__02

Vue路由02动态路由匹配结论一：当2个路由使用2个不同的组件时，在来回切换路由的时候组件会反复的创建销毁。结论二：当2个路由使用相同的组件时，在来回切换路由的时候，为了维持性能，组件会复用，意思是生命周期只会执行一次。所以当2个路由对应同一个组件时，我们可以通过watch检测$route属性来查看路由的变化以做出相应的调整。 watch:{ '$route...
复制链接

扫一扫

专栏目录