Vue路由

墨蓝 2021-09-07 06:12 526阅读 0赞

### Vue路由 ###

*  一、路由
 *   *  1.路由的发展
 *  二、js原生监听hash值的变化
 *  三、vue-router
 *  四、vue-router的使用
 *   *  1.js文件导入
     *  2.添加路由链接
     *  3.添加路由填充位
     *  4.创建路由组件
     *  5.配置路由规则，创建路由实例
     *  6.把路由挂载到Vue根实例上
 *  五、路由重定向
 *  六、嵌套路由
 *  七、动态匹配路由
 *  八、路由传参
 *  九、命名路由
 *  九、页面导航的两种方式
 *   *  1.声明式导航
     *  2.编程式导航
     *   *  1.this.$router.push('hash地址')
         *  2.this.$router.go(n)
 *  十、路由拦截
 *   *  1、请求路由前
     *  2.请求路由后
 *  十一、动态添加路由

# 一、路由 #

## 1.路由的发展 ##

一开始页面的刷新是后端根据请求的地址不同，返回不同的数据，渲染到页面上。  
本质上是url与服务器资源之间的对应关系，这个比较耗性能，频繁的请求，会造成网页的频繁刷新，而且是整个页面的刷新。  
因此出现了ajax，实际页面的局部刷新  
但是ajax不能实现前进和后退，因此又出现了SPA  
SPA：（Single Page Application）单页面应用程序，整个网址只有一个页面， 内容的变化通过ajax实现，局部的刷新，同时支持浏览器地址栏的前进和后退操作。  
SPA实现原理之一，基于URL的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求。  
在实现SPA过程中，最核心的技术点就是前端路由  
前端路由就是根据用户不同的事件，显示不同的页面内容。本质上是用户事件与事件处理函数之间的对应关系。前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。

不同路由显示不同页面的原理：就是不同的hash值对应不同的子组件。

# 二、js原生监听hash值的变化 #

<a href='#login' >
    <a href='#user' >
    <component :is='comName'></component>
    
    new Vue({ 
        data:{ 
       comName:'login'
    
    },
    
    components:{ 
        login,
        user,
    }
     
    })
    window.onhashchange = function(){ 
        switch(location.hash){ 
         case '#login':
         vm.comName = 'login'
         break
         case '#/user'
         vm.comName = 'user'
    }
       
    }

component标签是组件的占位符，is属性表示是哪个组件，当点击a标签时，url后面追加href里的值是\#号开头的，这时候hash值就发生了变化。触发了window.onhashchange ，  
这时根据不同的hash值，来给components标签的is组键赋值，当等于哪个组件时，就会把那个组件渲染到那个位置。  
路由的原理还是不同组件的渲染，组件已经注册号在Vue实例上面了，就看什么时候显示了。

# 三、vue-router #

是vue官方的路由管理器。  
不推荐上面的手动管理路由来切换组件。

vue-router包含的功能  
1.支持HTML5历史模式或hash模式  
2.支持嵌套路由  
3.支持路由参数  
4.支持编程式路由  
5.支持命名路由

# 四、vue-router的使用 #

1.引入文件  
2.添加路由链接  
3.添加路由填充位  
4.定义路由组件  
5.配置路由规则并创建路由实例  
6.把路由挂载到Vue根实例中

## 1.js文件导入 ##

## 2.添加路由链接 ##

<router-link to='/login'> login</router>
    <router-link to='/user'> user</router>
    //写在html中，router-link是vue中提供的标签，默认会被渲染成a标签。
    //to属性默认会被渲染为href属性
    //to属性的值默认会被渲染成#开头的hash值，所以不需要再写#了。
    //在页面上，点击，login,user就能触发hash值的改变

## 3.添加路由填充位 ##

<router-link to='/login'> login</router>
    <router-link to='/user'> user</router>
    <router-view></router-view>

## 4.创建路由组件 ##

const user = { 
      template :'<h1>user<h1>'
    }
    const login= { 
      template :'<h1>login<h1>'
    }
    
    const vm = new Vue({ 
    
    
    })

## 5.配置路由规则，创建路由实例 ##

var router = new  VueRouter({ 
         //VueRouter是引入router文件才会存在的构造函数
         //通过这个构造函数创建一个router实例对象。
     routes:[
     //routes是路由规则的数据，可以放多个路由规则
     //一个路由规则就是一个对象，有path属性和component属性
     //path表示当前路由规则匹配的hash值
     //component表示当前路由规则对应的那个组件，它只接收一个对象，不接受字符串
        { 
        path:'/user',
        component:user 
    }，
       { 
        path:'/login',
        component:login
    }
    ]
    })

## 6.把路由挂载到Vue根实例上 ##

new Vue({ 
      el:'#app',
       router,
    })

到这就能实现路由的跳转了，此时访问这个路由可通过this.$router

# 五、路由重定向 #

当打开网页时，默认的hash是/  
需要把这个hash值也对应一个组件，这样可以在显示主路由页面时，把子路由的某个页面也同时显示  
在路由规则中的redirect可以将path的值，重新指定另外的一个hash值。

var router = new  VueRouter({ 
       
       {  path:'/',
        redirect:'/user'
        //这样就表示hash为#/时和#/user都会显示user组件，此时的hash值也会变成/user
    },
       { 
        path:'/user',
        component:user 
    }，
       { 
        path:'/login',
        component:login
    }
    ]
    })
     
    }）

# 六、嵌套路由 #

点击父级路由显示模板内容  
模板内容里面又有子路由  
点击这个子路由，又能显示子路由的页面。  
这就是嵌套路由，一个路由页面里还有多个路由链接和路由页面

就是在父组件的模板里再写

const usename = {
    
     '<div> 子路由usename组件</div>'
    }
    
    const password= {
    
     '<div> 子路由password组件</div>'
    }
    const user = {
      template :`
      <div>
    <h1>user<h1>
    <router-link to='/user/usename'> usename</router>
    <router-link to='/user/password'> password</router>
    <router-view/>
    </div>
    `
    }

而在路由规则中的user规则

var router = new  VueRouter({ 
       
       {  path:'/',
        redirect:'/user'
     
    },
       { 
        path:'/user',
        component:user ，
        //要多写一个children属性表示有嵌套路由。规则写法和父级路由一致
        //这里children的path有多种写法
        // path:'/user/usename',表示#/user/usename的地址会跳转到user组件下的usename
        // path:'usename'，表示#/user/usename的地址会跳转到user组件下的usename
        // path:'/usename' 表示#/usename的地址会跳转到user组件下的usename
        //只要有‘/’在,就会当作根目录跳转。
        children:[
        { 
        path:'/user/usename',
        component:usename
        
    },{ 
     path:'/user/password',
        component:password
    }
    ]
    }，
       { 
        path:'/login',
        component:login
    }
    ]
    })
     
    }）

# 七、动态匹配路由 #

路由规则根据hash值的动态变化的部分，来显示不同的值

var router = new VueRouter({ 
       routes:[
         { 
         path:'/user/:id',component:user
         //id可以随便取，但是后面接收要对应上
    }
    ]
     
    })
    //这样hash值为/user/123时，user组件可以获取到这个123
    
    const user = { 
           template:'<div> { {$router.params.id}}<div>'
       
    }

动态匹配路由是多个链接都匹配一个路由规则，即只匹配一个组件，  
这个组件可以根据最后id值来显示不同的内容。

# 八、路由传参 #

$router.params获取参数，比较麻烦，可以使用props

const router = new  VueRouter({ 
       routes :[
       { 
        path:'/user/:id'
        component:user,
        props:true
        //当props为true时,params将会被设置为组件属性
        //当props不是boolean，是一个对象时，id就获取不到了
        //props:{ 
         // usename:'飞',
          //age:18,
         //要是想id能获取到，参数也能获取到，props需要写成一个函数
        //props:route=>({usname:'飞',age:18,id:route.params.id})
        //route是当前路由规则,这里函数体写成({usname:'飞',age:18,id:route.params.id})
        //是因为原本是{ 
          // return {usname:'飞',age:18,id:route.params.id}
    //}函数体只有一句化，且就是返回值，可以省略{}和return，为了不让解析器把对象的{}当作函数的{},所以需要加一层（）
        //一般都是第一种使用较多。
          
    }
    }
    ]
    
    })
    
    //组件中
    const user  =  { 
       props:['id'],//使用props接收路由参数
       template:'<div>{ {id}}</div>'//使用路由参数
       //当props不是boolean，是一个对象时，
       // props:['usename'，'age'],
       //template:'<div>{ {usename}}{ {age}}</div>'
       //此时就不能获取到这个id了。
       //当props为函数时，id和参数都能获取到
       //props:['usename','age','id'],
          //template:'<div>{ {usename}}{ {age}}{ {id}}</div>'
    
    }

# 九、命名路由 #

就是给路由规则加一个名字

const router = new  VueRouter({ 
       routes :[
       { 
        path:'/user/:id'
        component:user,
        name:'user'
        }
        })

加了name属性后，可以在链接中只写这个名字来表示这个路由

<router-link :to="{name:user,params:{id:132}}">user</router-link>

在js中可以直接添加这个名字，来表示要跳转的路由

this.$router.push({ name:'user',params:{ id:123}})
    //router.push('/user/123')本来是这么写的

# 九、页面导航的两种方式 #

## 1.声明式导航 ##

普通网页中的a标签或vue中的router-lin标签

## 2.编程式导航 ##

通过调用javaScript形式的API实现导航的方式，叫做编程式导航。  
比如location.href来实现页面的跳转。  
vue中

### 1.this.$router.push(‘hash地址’) ###

this.$router.push('/user')
    //可以跳转到路由规则中path:'/user'对应的那个组件.
    //this.$router.push可以放不同的类型
    //this.$router.push(对象)
    this.$router.push({ path:'/user'})
    //this.$router.push(命名路由，传递参数，)
    this.$router.push({ name:'user',params:{ id:123}})
    //带查询参数，变成/user?id=123
    this.$router.push({ { path:'/user',query:{ id:123}})

### 2.this.$router.go(n) ###

go是前进和后退的  
1是向前走一位  
\-1是后退走一位。

this.$router.go(-1)

# 十、路由拦截 #

## 1、请求路由前 ##

router.beforeEach(async(to, from, next) => { 
    
    //请求路由一般来做拦截，判断token是否存在，来进行判断
    
    
    })

## 2.请求路由后 ##

router.afterEach(() => { 
    
    })

# 十一、动态添加路由 #

router.addRoues()方法  
参数也是一个数组和路由规则routes一致.