vue router 配置

1. 安装

npm install vue-router

2.创建 router.js

在 src 文件夹下创建 router.js

代码示例如下：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

const router = new Router({
	mode: "history", //去掉url中的#
	routes: [{
			path: "/",
			component: () => import("@/pages/index")
		},
		{
			path: "/page1",
			component: () => import("@/pages/page1"),
			children: [{
				path: "/page1/page1_1",
				component: () => import("@/pages/page1_1"),
			}, ],
			redirect: "/page1/page1_1" //在children的后面加一个redirect：'/想要默认展示的子路由名字'

		}
	]
});

export default router;

3. 添加界面

在 src 文件夹下创建 pages文件夹，并在 pages文件夹下新建index.vue、page1.vue、page1_1.vue三个界面。

index.vue

<template>
	<div>index
		<a href="/page1">page1</a>
		<a href="/page1/page1_1">page1_1</a>
	</div>
</template>

<script></script>

<style></style>

page1.vue

<template>
	<div>
		<div class="text-bold">page1</div>
		<a href="/">index</a>
		<router-view></router-view>
	</div>
</template>

<script></script>

<style></style>

page1_1.vue

<template>
	<div>
		<div>page1_1</div>
	</div>
</template>

<script></script>

<style></style>

4. main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'// 引入路由
Vue.config.productionTip = false

new Vue({
	router, //挂载路由
	render: h => h(App),
}).$mount('#app')

5. App.vue修改

修改App.vue，使index.vue为首页。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style></style>

6. 效果