Vue路由

本文主要是介绍Vue路由，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、vue-router 基本用法

（1)  先声明两个组件模板对象

        var login = {template: "#login"}
        var reg = {template: "#reg"}

（2）创建路由对象

var router = new VueRouter({
            
            routes:[
                {path:'/login',component: login},
                {path:'/reg',component: reg}
            ]
        })

        routes是一个数组，是用来声明路由匹配规则；

        这里component的值，是要路由到的组件模板对象的名字

（3）将router对象挂载到vm身上

        var vm = new Vue({
            el:'.app',
            // 3.将router对象挂载到vm身上
            router:router
        })

（4）使用router-link标签路由到相应的组件，router-view给路由匹配到的组件，在视图区中占个位置

   <div class="app">
        <router-link to="login">登录</router-link>
        <router-link to="reg">注册</router-link>
        <!-- 4.在视图区中，给路由匹配到的组件，占个位置 -->
        <router-view> </router-view>
   </div>

         router-link在页面中会默认生成一个a标签 。

二、前端路由实现原理hash

（1)  通过window.location.hash 拿到地址栏中的url

（2）利用window对象身上的 onhashchange方法，实现路由监听

    <button class="btn">获取哈希</button>
    <script>
        var btn = document.getElementsByClassName('btn')[0];
        btn.onclick = function(){
            console.log(window.location.hash);
        }
        window.onhashchange = function(){
            console.log(window.location.hash);
        }
    </script>

三、路由导航链接样式设置

（1）router-link的 tag 属性

        <router-link to="login" tag="span">登录</router-link>
        <router-link to="reg" tag="span">注册</router-link>

        tag属性可以设置路由链接生成的标签类型。

（2）router对象的linkActiveClass属性和linkExactActiveClass

        linkActiveClass属性，可以自定义router-link激活类的名字

linkActiveClass: 'my-active'

        表示不渲染router-link-exact-active 这个类

linkExactActiveClass:''

（3）路由匹配的exact模式

         vue-router的路由匹配中有一个exact模式

          router-link在渲染的时候，他是非精确匹配的

          如图  '/login' 中 包含了 '/' 所以链接中 Home 和 登录 都被渲染了

        var home = {template:'<h1>这是Home组件</h1>'}
        var login = {template:'<h1>这是登录组件</h1>'}
        var reg = {template:'<h1>这是注册组件</h1>'}
        
        var router = new VueRouter({
            routes:[
                {path:'/login', component:login},
                {path:'/reg', component:reg},
                {path:'/',component:home}
            ],
        }) 

            可以在router-link中添加 exact 属性(boolen类型) 来解决这个问题

        <router-link to="/" exact tag="span">Home</router-link>

四、路由重定向redirect

        如果想网页一打开就是是登录组件，可以这样做，但是这样做，url中 /login 显示的组件与 / 显示的组件 一样 会产生一定的困扰；

        var login = {template:'<h1>这是登录组件</h1>'}
        var reg = {template:'<h1>这是注册组件</h1>'}
        var router = new VueRouter({
            routes:[
                {path:'/login', component:login},
                {path:'/reg', component:reg},
                {path:'/', component:login}
            ]
        }) 

        可以是用路由重定向的方法解决这个问题

{path:'/', redirect:'/login'}

五、路由嵌套

（1）在父组件中使用路由

    <div class="app">
        <router-link to="home">Home</router-link>
        <router-view></router-view>
    </div>
    <template id="home">
        <div>
            <h1>这是Home组件</h1>
            <router-link to="/home/login">登录</router-link>
            <router-link to="/home/reg">注册</router-link>
            <router-view></router-view>
        </div>
    </template>

（2）在路由对象router中使用子路由

        var home = {template:'#home'}
        var login = {template:'<h1>这是登录组件</h1>'}
        var reg = {template:'<h1>这是注册组件</h1>'}
        const router = new VueRouter({
            routes:[
                // 使用子路由
                {
                    path:'/home', 
                    component: home,
                    children:[
                        // 子路由要么写完整，要么只写路由名,连'/'都不要有
                        {path:'login',component:login},
                        {path:'reg',component:reg}
                    ]
                 }
            ]
        })

六、路由传参

服务端传参方式

    1.get传参：url：www.aynu.com/login.ashx?name=sun&pwd=123；

    2.post传参：通过form表单.

路由传参

    指的是我们在使用vue.js开发前端应用程序时的传参方式；

    是前端传参，不会向服务端发送请求，是组件与组件之间的传参，传递的参数都在路由中.

Vue路由传参方式有2种： 1. query   2. params

1.query传参

（1）在路由中传入参数

<router-link to="/login?id=8&age=21">登录</router-link>

（2）通过this.$route.query访问query参数对象

var login = {
            template:'<h1 @click="add">这是登录组件</h1>',
            data:function(){
                return {
                    id: '',
                    age:''
                }
            },
            created(){ 
                this.id = this.$route.query.id;
                this.age = this.$route.query.age;
            },
            methods: {
              add: function(){
                  console.log(this.id+':'+this.age);
              }  
            },
        }

2.params传参

（1）在路由中传入参数

        <router-link to="/login/8/21">登录</router-link>

（2）修改路由匹配规则

const router = new VueRouter({
            routes:[
                {path:'/login/:id/:age',component:login}
            ]
        })

（3）通过this.$route.params访问query参数对象

var login = {
            template:'<h1 @click="add">这是登录组件</h1>',
            data:function(){
                return {
                    id: '',
                    age:''
                }
            },
            created(){
                this.id = this.$route.params.id;
                this.age = this.$route.params.age;
            },
            methods: {
              add: function(){
                  console.log(this.id+':'+this.age);
              }  
            },
        }

3.query传参与params传参的区别

（1）传参的方式不同

（2）params需要修改路由匹配规则，query不需要

（3）访问参数对象方法不同：this.$route.query  /   this.$route.params

这篇关于Vue路由的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！