Vue入门六：前端路由-Vue Router

路由：本质就是对应关系

后端路由：根据不同的URL地址分发不同的资源；

前端路由：根据不同的用户事件，显示不同的页面内容；本质是用户与事件处理函数直接的对应关系。（负责事件监听，触发事件后，通过事件函数渲染不同内容）

SPA：即单页面应用程序，整个页面只有一个页面，内容的变化通过Ajax更新实现、同时支持浏览器地址栏的前进和后退操作；spa的实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求)；在实现spa的过程中，最核心的技术点就是前端路由。

Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有：支持HTML5历史模式或hash模式；支持嵌套路由；支持路由参数；支持编程式路由；支持命名路由；

  • 1、Vue-router的基本使用步骤

（1）引入相关的库文件
<!--导入Vue文件，为全局window对象挂载Vue构造函数-->
<script src="vue.js"></script>
<!--导入vue-router文件，为全局window对象挂载VueRouter构造函数-->
<script src="vue-router.js"></script>
（2）添加路由链接
<!--router-link 是vue中提供的标签，默认会被渲染为a标签-->
<!--to属性默认会渲染为href属性-->
<!--to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
（3）添加路由填充位
<!--路由填充位（也叫做路由占位符）-->
<!--将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
<router-view></router-view>
（4）定义路由组件
const user = {
        template: `<div>User</div>`
       }
（5）配置路由规则并创建路由实例
const router = new VueRouter({
        //routes是路由规则数组
        routes: [
            //每个路由规则都是一个配置对象，其中至少包含path和commponent两个属性：
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path: '/user', component: User}
        ]
})
（6）把路由挂载到Vue根实例中
new Vue({
        el:'#app',
        //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
        router
});

注：

路由重定向：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/user'},
            {path: '/user', component: User}
        ]
})

  • 2、Vue-router嵌套路由用法

（1）用法
 ①嵌套路由功能分析：
点击父级路由链接显示模板内容；模板内容中又有子级路由链接；点击子级路由链接显示子级模板内容；
 ②父路由组件模板
父级路由链接；父组件路由填充位；
③子路由模板
子级路由链接；子级路由填充位；
④嵌套路由配置
父级路由通过children属性配置子级路由；
 （2）示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-router的嵌套路由用法</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
<div id="app">
    <p>
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
    </p>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    const User = {
        template: `<div><h2>User组件</h2></div>`
    }
    const Register = {
        template: `
        <div>
            <h2>Register组件</h2>
            <hr>
            <router-link to="/register/tab1">Tab1</router-link>
            <router-link to="/register/tab2">Tab2</router-link>
            <router-view></router-view>
        </div>
        `
    }
    const Tab1 = {
        template: `<div><h3>Tab1</h3></div>`
    }
    const Tab2 = {
        template: `<div><h3>Tab2</h3></div>`
    }
    const router = new VueRouter({
        routes: [
            {path: '/user', component: User},
            {
                path: '/register', component: Register,
                //通过children属性，为、register添加子路由规则
                children: [
                    {path: '/register/tab1', component: Tab1},
                    {path: '/register/tab2', component: Tab2}
                ]
            }
        ]
    });
    new Vue({
        el: '#app',
        router
    });
</script>
</body>
</html>

  • 3、Vue-router动态路由匹配用法

（1）用法

应用场景：通过动态路由参数的模式进行路由匹配

var router=new VueRouter({
   routes:[
       //动态路径参数 以冒号开头
       {path:'/user:id',component:User}     
     ] 
});

const User={
   //路由租金中通过$route.params获取路由参数
   template:'<template>User{{$route.params.id}}</div>'       
}

调用：

<router-link to="/user/1">User1</router-link>

（2）路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。

①props的值为布尔类型

var router=new VueRouter({
   routes:[
       //如果props被设置为true，route.params将会被设置为组件属性
       {path:'/user:id',component:User，props:true}     
     ] 
});

const User={
   props:['id'],//使用props接收路由参数     
   //使用路由参数
   template:'<template>User{{id}}</div>'       
}

 ②props的值为对象类型

var router=new VueRouter({
   routes:[
       //如果props是一个对象，它会被按原样设置为组件属性
       {path:'/user:id',component:User，props:{uname:'lisi',age:12}}     
     ] 
});

const User={
   props:['uname','age'],//使用props接收路由参数     
   //使用路由参数
   template:'<template>User{{uname +'-----'+age}}</div>'       
}

 ③props的值为函数类型

var router=new VueRouter({
   routes:[
       //如果props是一个函数，则这个函数接收route对象为自己的形参
       {path:'/user:id',
        component:User，
        props:route=>({uname:'zs',age:20,id:route.params.id})}     
     ] 
});

const User={
   props:['uname','age','id'],//使用props接收路由参数     
   //使用路由参数
   template:'<template>User{{uname +'----'+age+'----'id}}</div>'       
}

  • 4、Vue-router命名路由用法

（1）命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

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

 调用：

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

router.push({name:'user',params:{id:123}})

  • 5、Vue-router编程式导航用法

（1）页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航。如：普通网页中的<a></a>或vue中的<router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。如：普通网页中的locations.href

（2）编程式导航基本用法

常用的编程式导航API如：this.$router.push('hash地址')和this.$router.go(n)

const User={
   template:'<div><button @click="goRegister">跳转到注册页面</button></div>',
   methods:{
       goRegister:function(){
            //用编程的方式控制路由跳转
            this.$router.push('/register');    
        } 
    }      
}

 （3）编程式导航参数规则

router.push()方法的参数规则：

//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名路由（传递参数）
router.push({name:'/user',params:{userId:123}})
//带查询参数，变成/register?uname=lisi
router.push({path:'/register',query:{uname:'lisi'}})
 
 

如果你真心觉得文章写得不错，而且对你有所帮助，那就不妨小小打赏一下吧，如果囊中羞涩，不妨帮忙“推荐"一下，您的“推荐”和”打赏“将是我最大的写作动力！

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接.
qq群 微信
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hoaprox/p/14460611.html