Vue路由配置

# Vue路由配置
> w如何管理页面关系呢？

Vue中，可以通过vue-router路由管理页面之间的关系。
Vue Router是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建**单页应用**变得轻而易举。

## 在Vue中引入路由
### 第一步，安装路由`npm install --save vue-router`
### 第二步，配置独立的路由文件
```js
//index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

//配置信息中需要页面的相关配置(已经在views中构建了不同页面vue)

const routes = [
	{
		path: "/",
		component: HomeView
	},
	{
		path: "/about",
		component: AboutView
	}
]

const router = createRouter({
	/**
	 * createWebHashHistory()使用
	 * 		http://localhost:8080/#
	 * 		http://localhost:8080/#/about
	 * 	原理：<a>标签的锚点链接
	 */
	/**
	 * createWebHistory()使用特点
	 * 		http://localhost:8080
	 * 		http://localhost:8080/about
	 * 	此种方式，需要后台配合做重定向，否则会出现404问题
	 *  原理：H5 pushState()
	 */
	history: createWebHashHistory(),
	routes
})

export default router;
```
### 第三步，引入路由到项目
```js
import { createApp } from 'vue'
import App from './App.vue'

//主入口文件中引入路由
import router from './router'

//createApp(App).mount('#app')
createApp(App).use(router).mount('#app') //通过.use来使用路由
```

### 第四步，在App.vue中指定路由显示入口`<router-view></router-view>`

### 第五步，指定路由跳转
```
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```

## 在路由中传递参数
`创建项目时，直接选择手动创建，然后将vue-router功能勾选上`

![](/media/202209/2022-09-15_102136&USKhMDk0ur9aCGeyLn6q.png)

增加了一个页面，NewsView.vue，如下图，如果所有都在一开始就import那儿加载进去，那就浪费资源，加载变慢。

![](/media/202209/2022-09-15_104508&Bgl4ufQRAhE87wKXOcDe.png)

而使用异步加载方式`component:() => import("../views/NewsView.vue")`，这样我们只需要加载首页先，可以让首页加载速度非常快。

> 页面跳转过程中，是可以携带参数的。例如查看一个列表项，点击进如查看到每个列表项的详情。

### 第一步：在路由配置中指定参数的key
```
{
	path: "/list/:name",
	name: "list",
	component:() => import("../views/ListView.vue")
}
```

### 第二步，在跳转过程中带上参数
```
<li><router-link to="/newsdetails/百度">百度新闻</router-link></li>
<li><router-link to="/newsdetails/头条">头条新闻</router-link></li>
<li><router-link to="/newsdetails/网易">网易新闻</router-link></li>
```

### 第三步，在详情页里读取路由携带的参数
`<p>{{ $route.params.name }}</p>`

## 嵌套路由配置

![](/media/202209/2022-09-15_112357&aBv57LyoAzE6Hu2TwijQ.png)

上图就是常见的路由嵌套，通常会在导航里嵌套了一个子导航。

### 第一步，创建子路由要显示的页面

### 第二步，在路由配置文件中添加子路由配置children
```js
{
	path: '/about',
		name: 'about',
		component: () => import('../views/AboutView.vue'),
		children: [{
			//二级导航的路径不用加"/"
			path: "us",
			component: () => import("../views/About/AboutUs.vue")
		}, {
			path: "info",
			component: () => import("../views/About/AboutInfo.vue")
		}]
}
```

### 第三步，指定子路由显示位置`<router-view></router-view>`
### 第四步，添加子路由跳转链接
```
<router-link to="/about/us">关于我们</router-link> |
<router-link to="/about/info">关于信息</router-link>
<router-view></router-view>
```
### 第五步，重定向配置 `redirect: "/about/us" `,使得打开后默认显示一个子路由页面