共计 3558 个字符，预计需要花费 9 分钟才能阅读完成。
Vue Router 的应用
原文链接：https://note.noxussj.top/?source=sifo
我的项目中注入路由器
1. 在我的项目中 src 目录下新建 router 目录，其中蕴含 index.js 路由主文件。
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import {routes} from './routes.js'
Vue.use(Router)
const router = new Router({routes})
export default router
2. 新建 routes.js 路由表文件。
// src/router/routes.js
const routes = [
{
path: '/component1',
component: () => import('../components/Component1.vue')
},
{
path: '/component2',
component: () => import('../components/Component2.vue')
}
]
export {routes}
3.main.js 注册路由。
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
Vue.config.productionTip = false
new Vue({
router,
render: (h) => h(App)
}).$mount('#app')
4. 设置路由进口 router-view。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
5. 验证路由，在网页 url 中输出路由地址 /component1 就可能看到咱们的页面了。
6. 以上是路由的根本应用。
动静路由匹配
动静路由是指咱们的路由前面携带了动静的参数，例如我有一个新闻详情页面，每个新闻详情页面展现的数据都不同，然而却又应用的是同一个组件。这种状况是能够应用动静路由。
根底案例
1. 批改路由表，增加匹配动静参数的路由。这里写了两条路由规定代表，不传动静参数时候也能展现该组件，否则页面匹配不到是会空白的。
const routes = [
{
path: '/news',
component: () => import('../components/News.vue')
},
{
path: '/news/:id',
component: () => import('../components/News.vue')
}
]
export {routes}
2. 通过 $route 路由信息对象获取动静路由参数。
<template>
<div class="news">News id: {{$route.params.id}}</div>
</template>
3. 验证路由。
嵌套路由
嵌套路由其实很简略，然而你思路没想通之前就会感觉很简单。咱们平时应用的页面切换的场景，基本上，一级路由就能实现了。然而实际上我的项目开发中会常常遇到多层路由的状况，也就是嵌套路由。举个例子，假如当初我不止有新闻页面，我还有一个用户主页面，然而我用户主页面外面又蕴含了两个子页面，别离是用户信息编辑页面，用户公布帖子页面。
根底案例
1. 批改路由表，增加用户主页面路由（一级路由）、增加用户信息编辑页面（二级路由）、增加用户公布帖子页面（二级路由）。
// src/routes.js
const routes = [
{
path: '/user',
component: () => import('../components/user/MyIndex.vue'),
children: [
{
path: 'profile',
component: () => import('../components/user/MyProfile.vue')
},
{
path: 'posts',
component: () => import('../components/user/MyPosts.vue')
}
]
}
]
export {routes}
2. 设置二级路由进口 router-view，因为一级的咱们曾经设置过了。你要记住，你用到了多少层级路由嵌套，就要设置对应的路由进口，路由进口代表匹配到的组件，会替换掉 router-view 进行展现的。
// components/user/index.vue
<template>
<div class="user">
user
<router-view></router-view>
</div>
</template>
3. 验证路由，能够发现 router-view 标签被组件替换掉了。
4. 再替换另外一个路由地址，成果仍然是失常的。
编程式导航
在下面的所有案例中，咱们都是通过手动替换浏览器地址栏中的门路，从而达到切换路由的成果。那么有没有方法通过 JavaScript 代码的形式进行切换呢？
根底案例
1. 在 App.vue 页面中通过 $router 路由操作对象中的 push 办法进行路由切换，请记住是 $router，而不是 $route，这两者是有区别的。一个是操作路由用的，一个是获取路由信息用的。
<!-- src/App.vue -->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {mounted() {setTimeout(() => {
// 字符串
this.$router.push('/user/profile')
// 对象
// this.$router.push({path: '/user/posts'})
// 携带查问参数 query
// this.$router.push({path: '/news', query: { id: 'xiaoming'} })
// 动静路由匹配
// this.$router.push('/news/' + 'xiaoming')
}, 1000)
}
}
</script>
2. 这里就不验证了，小伙伴们能够本人尝试。
3. 另外通过路由器操作对象 $router 的 go 办法是能够实现路由的后退、后退操作的。$router.go(1) 代表前进一步，$router.go(-1) 代表后退一步。
重定向
重定向是须要通过路由表进行配置的，重定向的作用就是当用户拜访 /a 路由时，URL 将会被替换成 /b，而后匹配路由为 /b。
根底案例
1. 配置路由表，增加重定向。
// src/router/routes.js
const routes = [
{
path: '/user',
redirect: '/news',
component: () => import('../components/user/index.vue')
},
{
path: '/news',
component: () => import('../components/News.vue')
}
]
export {routes}
2. 验证路由，咱们尝试拜访 /user，看看实际上是不是间接变成了拜访 /news 路由。不仅 url 变成了 /news，展现的路由组件，应该也是 /news 的。小伙伴们须要自行验证一下。
别名
别名其实和重定向很相似，也很容易混同。例如 /a 路由的别名是 /b，意味着，当用户拜访 /b 时，URL 会放弃为 /b，然而路由匹配则为 /a，就像用户拜访 /a 一样。
1. 配置路由表，增加别名。
const routes = [
{
path: '/user',
alias: '/news',
component: () => import('../components/user/index.vue')
}
]
export {routes}
2. 验证路由，咱们尝试拜访 /news，URL 中应该会放弃显示为 /news，然而实际上渲染的组件应该是 /user。
HTML5 History 模式
Vue Router 默认是 hash 模式 —— 应用 URL 的 hash 来模仿一个残缺的 URL，于是当 URL 扭转时，页面不会从新加载。hash 模式代表 URL 前面有个 # 符号。在传统模式中，咱们都是利用 # 来实现锚点性能的。
如果不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来实现 URL 跳转而毋庸从新加载页面。
const router = new Router({
mode: 'history',
routes
})
当你应用 history 模式时，URL 就像失常的 url，例如 http://yoursite.com/user/id 也难看！
原文链接：https://note.noxussj.top/?source=sifo
