vue-router初识

最新推荐文章于 2024-05-04 21:21:25 发布

webnoob

最新推荐文章于 2024-05-04 21:21:25 发布

阅读量248

点赞数

分类专栏： VueJS 文章标签： vue js vue-router

本文链接：https://blog.csdn.net/Szu_AKer/article/details/84332167

版权

VueJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue-router 是vue框架的前端路由插件，主要是通过监测 onhashChange 事件，在动态挂载不同组件到固定位置。

1. 基本配置

如下代码：

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

    <script src="dist/vue.js"></script>
    <script src="dist/vue-router.js"></script>

    <script>
        var Login = {
            template: '<div><h1>我是登陆页面</h1></div>'
        };

        var Register = {
            template: '<div><h1>我是注册页面</h1></div>'
        };

        // 1. 声明路由配置对象
        var myRouter = new VueRouter({
            routes: [
                {path: '/login', component: Login},
                {path: '/register', component: Register}
            ]
        });

        // 2. 在需要路由跳转的组件内留坑
        var App = {
            template: `
                <div>
                    <router-link to="/login">登陆</router-link>
                    <router-link to="/register">注册</router-link>
                    <!-- 留坑 -->
                    <router-view></router-view>
                </div>
            `
        };

        // 3. 在vue配置对象中增加router属性
        var vm = new Vue({
            el: '#app',
            components: {
                'app': App
            },
            template: '<app/>',
            router: myRouter
        })
    </script>
</body>

基本步骤：

通过 new VueRouter声明路由配置对象，在对象中增加routes属性配置路由规则，或者调用配置对象的方法addRoutes
用vue 的内置组件 <router-view>在需要路由跳转的组件内留坑，用 <router-link> 作为猫点
在vue对象配置中增加 router ，指定我们的路由配置对象；也可以在组件 App 内配置，只要在留坑组件的父组件即可

输入结果：
在这里插入图片描述

其中，router-link 的to属性可以绑定一个对象，对象用name属性指定具体哪条路由规则，相应的路由对象的规则也要增加name属性，这样就不用每次修改路由路径的时候，去修改多处地方，如下修改代码：

var myRouter = new VueRouter({
      routes: [
           {name: 'login', path: '/login', component: Login},
           {name: 'register', path: '/register', component: Register}
       ]
   });
   
 var App = {
       template: `
           <div>
               <router-link :to="{name: 'login'}">登陆</router-link>
               <router-link :to="{name: 'register'}">注册</router-link>
               <!-- 留坑 -->
               <router-view></router-view>
           </div>
       `
   };

2. 路由传参

存在两种路由传参方式，一种是query的方式，如#/login/id=1&name=tom；一种是params的方式，如#/register/2/marry，实例代码：

<script>
   var Login = {
       template: '<div><h1>我是登陆页面</h1></div>',
       created: function() {
           console.log(this.$route.query);
       }
   };

   var Register = {
       template: '<div><h1>我是注册页面</h1></div>',
       created: function() {
           console.log(this.$route.params);
       }
   };

   // 1. 声明路由配置对象
   var myRouter = new VueRouter({
       routes: [
           {name: 'login', path: '/login', component: Login},
           {name: 'register', path: '/register/:id/:name', component: Register}
       ]
   });

   // 2. 在需要路由跳转的组件内留坑
   var App = {
       template: `
           <div>
               <router-link :to="toLoginPath">登陆</router-link>
               <router-link :to="toRegisterPath">注册</router-link>
               <!-- 留坑 -->
               <router-view></router-view>
           </div>
       `,
       data: function() {
           return {
               toLoginPath: {
                   name: 'login',
                   query: {
                       id: 1,
                       name: 'tom'
                   }
               },
               toRegisterPath: {
                   name: 'register',
                   params: {
                       id: 2,
                       name: 'marry'
                   }
               }
           }
       }
   };
</script>

结果如下：
在这里插入图片描述

query 方式不用修改路由规则，params 方式要在原来规则加上参数占位符
在组件内可以通过 this.$route 获取路由到改组件的路由规则对象，注意不是路由配置对象

3. 嵌套路由

假如我们需要在登陆页面分个人登陆和企业登陆，通过/login/person 跳转到个人登陆，通过/login/company 跳转到企业登陆，则需要在登陆页面根据路由另外去挂载个人还是企业的登陆页面，实例代码如下：

    <script>
        var Login = {
            template: `<div>
                <h1>登陆页面</h1>
                <router-view></router-view>
            </div>`,
        };

        var personLogin = {
            template: '<div>个人登陆页面</div>'
        };

        var companyLogin = {
            template: '<div>企业登陆页面</div>'
        };

        // 1. 声明路由配置对象
        var myRouter = new VueRouter({
            routes: [
                {
                    name: 'login', path: '/login', component: Login,
                    children: [
                        {name: 'login.person', path: 'person', component: personLogin},
                        {name: 'login.company', path: 'company', component: companyLogin}
                    ]    
                },
            ]
        });

        // 2. 在需要路由跳转的组件内留坑
        var App = {
            template: `
                <div>
                    <router-link :to="{name:'login.person'}">个人登陆</router-link>
                    <router-link :to="{name:'login.company'}">企业登陆</router-link>
                    <!-- 留坑 -->
                    <router-view></router-view>
                </div>
            `
        };

        // 4. 在vue配置对象中增加router属性
        var vm = new Vue({
            el: '#app',
            components: {
                'app': App
            },
            template: '<app/>',
            router: myRouter
        })
    </script>

结果如下：
在这里插入图片描述

路由规则对象的children 属性表示子路由规则，它也是一个路由规则对象数组
子路由规则对象的path属性是相对路径，也可以加上/表示绝对路径

4. 路由钩子

有时候路由跳转页面需要判断是否有权限，这时就需要用到路由钩子函数beforeEach 跳转前进行权限等处理，如下代码：

    <script>
        var isLogin = false;

        var Login = {
            template: `<div><h1>登陆页面</h1></div>`,
            created: function(){
                isLogin = true;
            }
        };

        var Music = {
            template: `<div><h1>音乐界面</h1></div>`
        }

        // 1. 声明路由配置对象
        var myRouter = new VueRouter();

        myRouter.addRoutes([
            {name: 'login', path: '/login', component: Login},
            {name: 'music', path: '/music', component: Music, meta: {isChecked: true}}
        ]);

        // 路由钩子函数，校验跳转权限
        myRouter.beforeEach(function(to, from, next){
            if(!to.meta.isChecked) {
                next();
            }else {
                if(isLogin){
                    next();
                }else {
                    alert('请先登陆');
                    next({name: 'login'});
                }
            }
        });

        // 2. 在需要路由跳转的组件内留坑
        var App = {
            template: `
                <div>
                    <router-link :to="{name:'login'}">登陆</router-link>
                    <router-link :to="{name:'music'}">听音乐</router-link>
                    <!-- 留坑 -->
                    <router-view></router-view>
                </div>
            `
        };

        // 3. 在vue配置对象中增加router属性
        var vm = new Vue({
            el: '#app',
            components: {
                'app': App
            },
            template: '<app/>',
            router: myRouter
        })
    </script>

上面代码表示在进入音乐界面的时候必须先登陆，不然会重定向到登陆，注意以下几点：

路由规则对象的meta 表示自定义数据，可以在组件内的规则对象this.$route.meta 获取
钩子函数的参数：to 表示跳转到的路由规则对象，from 表示从哪个路由规则对象跳转而来
next()表示允许路由对应的组件，next(false) 表示禁止跳转，next([string|Object])则表示重定向到对应的路由

webnoob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router初识

vue-router 是vue框架的前端路由插件，主要是通过监测 onhashChange 事件，在动态挂载不同组件到固定位置。1. 基本配置如下代码：&amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;app&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;a
复制链接

扫一扫

专栏目录