使用vue-router

vue-router的简单使用

#1 安装vue-router：

npm install vue-router --save

#2 在src文件夹下新建router目录，在该目录下新建一个index.html文件

#3 在刚才创建的index.html文件中写入如下代码：

import VueRouter from 'vue-router'
import Vue from 'vue'

// 1. 通过vue.use(插件),安装插件。vue-router是一个插件，而任何插件在使用之前都要使用vue.use()安装
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [  //url映射

}
const router = new VueRouter({
	routes,
})

// 3.将router对象传入到Vue实例中
export default router

// 4.在Vue实例所在的js文件下，如main.js,导入router
import router from './router/index'

new Vue({
	el:'#app',
	router,
	render:h => h(app)
})

通过以上三步，vue-router的架子基本就已经搭建出来了，如果通过脚手架来构建项目的话，那么上面的步骤其实都可以自动完成，接下来介绍如何使用vue-router。

注意到，在我们new一个VueRouter的实例时，向其中传入了一个routes参数，该参数是一个包含着映射关系的列表，即一个url对应一个组件的映射表。因此要想让router正常工作，我们还需要创建一些组件。

为了去完善这个映射表，假设现在已经有了若干个组件：home、about、profile，我们通过在routes中添加一个对象的形式来实现一个映射：

routes = [
	{	
		path:'/home',
		component:
	},
	{	
		path:'/home',
		component:
	},{	
		path:'/home',
		component:
	}
}

之后我们还需要两个组件：

• <router-link>：标签。
• <router-view>：占位。

这两个组件都是vue-router自带的全局组件，直接拿来用就行。

例：

//App.vue
<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<router-view>的作用就是占位，比如当<router-view>位于<router-link>的下面时，那么内容就会在下方呈现，位于上面时内容就会在上面呈现。

<router-link>本质上是通过改变url hash的方式来实现url的切换的。

设置路由默认值

如果需要让用户自己点击首页，才呈现首页页面的话，这是不合理的，因此我们需要为路由设置一个默认值。

routes = [
	{
		path:'/',
		redirect:'/home'
	},
	...
}

改为history模式

vue-router默认使用的是hash的方式来生产url，这会使得url中多一些影响美观的 # 号，因此我们可以将它改为histroy模式，方法就是在new VueRouter时，除了传入routes外再传入一个mode属性就好：

const router = new VueRouter({
	routes,
	mode:'history'
})

<router-link>组件的属性

to    //指定path

tag   //指定组件类型，默认是超链接

replace   //设置history模式为replaceState，默认是pushState,pushState可以后退或前进,该属性不需要指定值
			
active-class  //该属性可以给router-link-active设置一个别名
			  //router-link-active?
			  //当一个<router-link>组件被点击时，它会多出两个默认的class，
			  //分别是router-link-exact-active、router-link-active

其中，active-class属性修改router-link-active类的别名的方法还可以更加简洁，通过在index.js的VueRouter中传入linkActiveClass属性，可以给出一个router-link-active的别名，之后就不需要在<router-link>中额外设置。如下：

const router = new VueRouter({
	routes,
	mode:'history',
	linkActiveClass:'active'
})

通过代码跳转路由

this.$router.push('/home')
this.$router.push({ path: 'home' })
this.$router.push({ name: 'user', params: { userId: '123' }})
this.$router.push({ path: `/user/${userId}` }) 

this.$router.replace('/home')
...

以上的实例中用到了命名路由，我们可以根据需要给路由命名：

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

之后链接到该命名路由可以这样：

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>

//类比:
router.push({ name: 'user', params: { userId: 123 }})

动态路由

如 user/name 这种path，name的值因为用户的不同是不确定的，这种时候需要动态路由。

//index.js
import User from '..component/user.vue'
routes = [
	{
		path:'user/:userid',
		component:User
	},
	...
]

//App.vue
<router-link to='/user/lihua/'></router-link>  //直接写入

<router-link :to="'user/' + userid"></router-link>  //动态获取

{{ $route.params.userid }} //获取url中的userid

注意：$router与$route的区分
$router是整个的VueRouter，而$route是指当前活跃路由。

嵌套路由

类似 home/news、home/article 这样的path，即嵌套路由。

//index.js
import News from '..component/news.vue'
import Article from '..component/article.vue'
routes = [
	{
		path:'/home',
		component:User,
		childern:[  //子路由
			{
				path:'/',  
				redirect:'/home/news'
			},
			{
				path:'news',  //不需要 /
				component:News
			},
			{
				path:'articles',  
				component:Article
			}
		]
	},
	...
]

//home.vue
<template>
	<router-link to="/home/news">新闻</router-link>
	<router-link to="/home/articles">文章</router-link>
	<router-voew><router-view>
</template>