Vue前端路由

男娘i 2022-08-29 00:02 256阅读 0赞

### Vue前端路由 ###

*  Vue Router
 *  vue-router的基本使用
 *   *  引入相关的库文件
     *  添加路由链接
     *  添加路由填充位
     *  定义路由组件
     *  配置路由规则并创建实例对象
     *  将路由挂载到Vue根实例中
 *  路由重定向
 *  vue-router嵌套路由
 *  vue-router动态路由匹配
 *  路由组件传递参数
 *   *  props值为布尔值
     *  props值为参数对象
     *  props的值为函数类型
 *  命名路由
 *  编程式导航

# Vue Router #

Vue Router是Vue.js官方的路由管理器，它和vue.js的核心深度结合，可以非常方便的用于SPA（单页面应用程序）的开发

Vue Router包但不限于的功能有：

*  支持HTML5的历史模式或hash模式
 *  支持嵌套路由
 *  支持路由参数
 *  支持编程式路由
 *  支持命名路由

# vue-router的基本使用 #

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

## 引入相关的库文件 ##

由于vue-router依赖于vue.js，因此需要先引入vue.js

<script src="../Tools/vue.js"></script>
    
    <script src="../Tools/vue-router3.5.2.js"></script>

## 添加路由链接 ##

`<router-link></router-link>`是vue中提供的标签，默认会被渲染为一个`<a></a>`标签，`<router-link></router-link>`标签中的`to`属性会被渲染为`href`属性，`to`的属性值会被默认渲染为以`#`开头的`hash`值

<router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>

## 添加路由填充位 ##

路由填充位，也叫路由占位符，将来通过路由规则匹配到的组件，将会被渲染到`router-view`所在的位置

<router-view></router-view>

## 定义路由组件 ##

const user = { 
    	template:`<div>User组件</div>`
    };
    const register={ 
    	template:`<div>Register组件</div>`
    };

## 配置路由规则并创建实例对象 ##

const router = new VueRouter({ 
    	// routes是所有的路由规则数组
    	routes:[
    		// 每个路由规则都是一个配置对象，其中至少包含path和component属性
    		// path对应当前路由规则匹配的hash值
    		// component为当前路由规则所对应要展示的组件
    		{ path:"/user", component:user},
    		{ path:"/register",component:register},
    	],
    });

## 将路由挂载到Vue根实例中 ##

var vm = new Vue({ 
    	el:"#box",
    	data:{ },
    	router:router,
    });

# 路由重定向 #

路由重定向是指当用户在访问地址A时，强制跳转至地址B，从而展示特定的组件页面。  
这里通过路由规则的`redirect`属性指定一个新的路由地址，可以很方便的设置路由的重定向

const router = new VueRouter({ 
    	routes:[
    		// 其中path表示需要被重定向的原地址，redirect表示需要重定向到的新地址
    		{ path:"/",redirect:"/user"},
    		{ path:"/user",component:user},
    		{ path:"/register",component:register},
    	],
    });

# vue-router嵌套路由 #

在一个路由的模板中再使用`<router-link></router-link>`标签来嵌套子路由

// 先定义一个子组件
    var tab1 = { 
    	template:`<h3>这是tab1子组件</h3>`,
    };
    var register = { 
    	template:`<div> <router-link to="/register/tab1">tab1子组件</router-link>  <router-view /> </div>`,
    };
    // 在router实例中通过 children数组 嵌套子路由
    const router = new VueRouter({ 
    	toutes:[
    		{ path:"/register",component:register, children:[
    			{ path:"/register",component:tab1},
    		]},	
    	],
    });

# vue-router动态路由匹配 #

如果某些路由规则是一样的，只有一部分是动态变化的，那可以用动态路由参数进行路由匹配

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

在user组件中就可以通过`$route.params`访问匹配到的id值了

var user = { 
    	template:`<div>第{ {$route.params.id}}个user组件</div>`,
    };

# 路由组件传递参数 #

上面的使用`id`传入组件，然后组件调用`$route`的方式可以传参，但是会与对应的路由现成高度耦合，不够灵活，所以在这里我们可以使用`props`将组件和路由进行解耦

## props值为布尔值 ##

在路由规则中设置`props:true`表示开启`props`传参，然后就可以在组件中通过`props`接收参数

var user = { 
    	props:["id"],
    	template:`<div>{ {id}}</div>`,
    };
    const router = new VueRouter({ 
    	routes:[
    		{ path:"/user/:id",component:user,props:true},
    	],
    });

## props值为参数对象 ##

当`props`为**参数对象**时，即表示路由中提供的数据，组件中可以访问`props`中的数据，但是hash中的动态参数id此时是访问不到的

var user = { 
    	props:["uname","age"],
    	template:`<div>{ {uname}}+{ {age}}</div>`,
    };
    const router = new VueRouter({ 
    	routes:[
    		// 此时id访问不到
    		{ path:"/user/:id",component:user,props:{ uname:"张三",age:18}},
    	],
    });

## props的值为函数类型 ##

如果既想传递对象数据，又想访问动态id，则可以让`props`的值为函数类型，如果`props`是一个函数，则这个函数接收`route`对象作为自己的形参

var user = { 
    	props:["name","age","id"],
    	template:`<div>{ {uname}}+{ {age}}</div>`,
    };
    const router = new VueRouter({ 
    	routes:[
    		{ path:"/user/:id",component:user,
    		// 在props中return一个参数对象
    		props:route=>({ name:"张三",age:18,id:route.params.id})}
    	],
    });

# 命名路由 #

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

const router = VueRouter({ 
    	routes:[
    		// 使用name属性给路由规则起别名
    		{ name:"user",path:"/user/:id",component:user,porps:route=>({ name:"李四",age:18,id:route.params.id})},
    	],
    });

在使用时为`<router-link></router-link>`标签**动态绑定**`to`属性，并给`to`属性中传入一个对象，对象中的`name`对应路由规则中的`name`，`params`中的值则是要传入的动态id值

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

# 编程式导航 #

页面导航的方式有两种，一种是声明式导航，一种是编程式导航  
声明式导航即在`<a></a>`标签中直接添加`href`属性  
编程式导航即通过调用API进行页面的跳转，例如调用`location.href`进行页面的跳转  
在Vue中常用的编程式导航API有两个

this.$router.push("hash地址");
    // n为整数，-1表示后退一页，1表示前进一页
    this.$router.go(n);