Vue前端路由

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

<!-- 导入后会为全局挂载一个Vue构造函数 -->
<script src="../Tools/vue.js"></script>
<!-- 导入后会为全局挂载一个VueRouter构造函数 -->
<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);