4.4 vue-router的安装和配置

vue-router是Vue.js官方的路由插件，它是和Vue.js深度集成的，适用于构建单页面应用。

vue-router是基于路由和组件的。

• 路由用于设定访问路径，将路径和组件映射起来。
• 在vue-router的单页面应用中，路径的改变就是组件的切换

安装vue-router

• npm install vue-router --save
• 在src中创建router文件夹，在router文件夹下创建index.js文件，在此文件中配置路由相关信息

index.js中的内容

  

import Vue from 'vue'
import App from './App.vue'
//如果导入的是目录，会自动找index.js，所以后边的index.js可以不写
import router from './router'



Vue.config.productionTip = false

new Vue({
	//此处挂载路由实例，可以简写
	router:router,
  render: h => h(App),
}).$mount('#app')

//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'

//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//2.创建VueRoter对象
const router=new VueRouter({
	//配置路由和组件之间的应用关系
	routes:[
		
	]
})
//3.将router对象传入Vue实例中
export default router

配置路由映射关系的步骤

 为什么要创建路由组件，因为一个组件对应一个路径，没有路由组件就建立不了对应关系。

//2.创建VueRoter对象
const router=new VueRouter({
	//配置路由和组件之间的映射关系
	routes:[
		//一个映射关系就是一个对象
		{
			path:'/home',
			component:home
		},
		{
			path:'/about',
			component:about
		}
	]
})

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

<script>
	
export default {
  name: 'App'
}
</script>

<style>
</style>

router-link是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签。

路由的默认值

	routes:[
		//一个映射关系就是一个对象
		{
			path:'/',
			redirect:'/home'
		},
		{
			path:'/home',
			component:home
		},
		{
			path:'/about',
			component:about
		}
	]

path:'/'加不加/都可以。

修改为HTML5的history模式，通过mode属性。

const router=new VueRouter({
	//配置路由和组件之间的映射关系
	routes:[
		//一个映射关系就是一个对象
		{
			path:'/',
			redirect:'/home'
		},
		{
			path:'/home',
			component:home
		},
		{
			path:'/about',
			component:about
		}
	],
	mode:'history'
})

router-link的属性

• tag属性：渲染成什么标签。

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

• replace属性：不能返回

<template>
  <div id="app">
		<router-link to="/home" tag="button" replace>首页</router-link>
		<router-link to="/about" tag="button" replace>关于</router-link>
		<router-view></router-view>
  </div>
</template>

• active-class属性：指定活跃的路由样式。也可以路由配置里面增添linkActiveClass属性。

  

通过代码跳转路由

<template>
		<router-view></router-view>
		<button type="button" @click="homeClick">*首页*</button>
		<button type="button" @click="aboutClick">*关于*</button>
  </div>
</template>

<script>
	
export default {
  name: 'App',
	methods:{
		homeClick(){
			this.$router.push('/home')
			//this.$router.replace('/home')
		},
		aboutClick(){
			this.$router.push('/about')
		}
	}
}
</script>

<style>
	.wangdou{
		color: #008800;
		background-color: red;
	}
</style>

使用this.$router.push()跳转会报错，但是不会影响页面。原因就是在使用vue-router进行路由跳转时，由于导航重复进而报错。解决：重写router原型中的push方法，在router下的index.js中添加

const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
   return originalPush.call(this, location).catch(err => err)
}

动态路由（路径不固定）

//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'
import home from '../components/home'
import about from '../components/about'

//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//2.创建VueRoter对象
const router=new VueRouter({
	//配置路由和组件之间的映射关系
	routes:[
		//一个映射关系就是一个对象
		{
			path:'/',
			redirect:'/home'
		},
		{
			path:'/home',
			component:home
		},
		{
			path:'/about/:userid',
			component:about
		}
	],
	mode:'history'
})
//3.将router对象传入Vue实例中
export default router

<template>
  <div id="app">
		<router-link to="/home" tag="button" replace active-class="wangdou">首页</router-link>
		<router-link :to="/about/+userid" tag="button" replace active-class="wangdou">关于</router-link>
		<router-view></router-view>
  </div>
</template>

<script>	
export default {
	name: 'App',
	data(){
		return {
			userid:'wangdou'
		}
	}
}
</script>

路由懒加载

• build后生成的dist目录的文件都是打包过的。js目录下：
• app开头的.js文件是自己写的JS逻辑
• chunk-vendors开头的.js是使用到的第三方应用打包代码

 

//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'
// import home from '../components/home'
// import about from '../components/about'
const home=()=>import('../components/home')
const about=()=>import('../components/about')