[vue] Vue-router（路由）的使用

介绍

基本使用

安装vue-router，
命令：npm i vue-router

应用插件：Vue.use(VueRouter)

编写router配置项:

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    
    
	routes:[
		{
    
    
			path:'/about',
			component:About
		},
		{
    
    
			path:'/home',
			component:Home
		}
	]
})

将router配置项配置到Vue实例中

//引入Vue
import Vue from 'vue'

//引入App
import App from './App.vue'

//引入VueRouter
import VueRouter from 'vue-router'

//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
    
    
	el:'#app',
	render: h => h(App),
	// 将配置对象挂载到Vue实例上
	router:router
})

实现切换（active-class可配置高亮样式）

<div class="list-group">
    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
    <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>

指定展示位置

<router-view></router-view>

几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的·$route·属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的$router属性获取到。

完整代码：

---

Vue-router（路由）的使用