vue中路由的基本使用

---

前言

路由分为后端路由和前端路由：
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。
前端路由：在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。

---

创建路由的五步曲

1.第一步，引入js文件，放在vue.js后面

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

2.第二步，创建路由实例

const router = new VueRouter({
})

3.第三步，创建映射关系

routes: [
// 路由的重定向
	{
		path: '/',
		redirect: '/index'
	},
	{
		path: '/index',
		// component: index
		// 命名视图
		components: {
			default: index,
			detail,
			mine
		}
	},
	{
		path: '/detail',
		component: detail,
		// 路由嵌套
		children: [
			// path路径后不能加 / 
			{
            	path: 'play',
                component: play
            },
     		{
				path: 'study',
                component: study
            }
		]
	},
	{
		path: '/mine/:ids',
        name: 'my',
        component: mine
	}
],
// 配置 linkActiveClass: '自定义的类名'
linkActiveClass: 'active'

4.第四步，将路由实例挂载到vue实例上。

const vm = new Vue({
	//第四步，将路由实例挂载到vue实例上。
	// router: router,
	router,
	el: '#app',
	data: {
	},
	methods: {
	}
})

5.第五步，预留展示区域。

<div id='app'>
	<!-- 第五步，预留展示区域。 -->
	<router-view></router-view>
    <router-view name="detail"></router-view>
    <router-view name="mine"></router-view>
</div>

---

总结

以上就是今天要讲的内容。