vue——路由router

点击页面中的导航链接不会刷新页面，只会做页面的局部更新
1、安装vue-router 执行 npm i vue-router@3命令 注意版本 vue2——vue-router3；vue3——vue-router4
2、引入 import VueRouter from ‘vue-router’ ，应用 Vue.use(VueRouter)
3、创建并暴露一个路由器

//  改文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import MyAbout from '../components/MyAbout.vue'
import MyHome from '../components/MyHome.vue'
// 创建并暴露一个路由器
export default new VueRouter({
	routes: [
		{
			path: '/about',
			component: MyAbout
		},
		{
			path: '/home',
			component: MyHome,
		},
	]
})

4、将路由器挂载 到vue实例

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

5、使用路由

<div class="list-group">
	<!-- 原始html中使用a标签实现页面的跳转 -->
	<!-- <a class="list-group-item active" href="./about.html">About</a> -->
	<!-- <a class="list-group-item" href="./home.html">Home</a> -->
	
	<!-- vue中使用 router-link 实现路由的切换 -->
	<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>
<div class="panel-body">
	<!-- 指定组件的呈现位置 -->
	<router-view></router-view>
</div>

使用 <router-link> 标签用于跳转路由 其中 active-class 为点击后的样式 to 为跳转路径
使用 <router-view> 标签显示跳转后组件呈现的位置