Vue Router 的应用

原文链接：https://note.noxussj.top/?source=sifo

我的项目中注入路由器

1.在我的项目中 src 目录下新建 router 目录，其中蕴含 index.js 路由主文件。

// src/router/index.jsimport 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.jsconst 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 = falsenew 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.jsconst 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.jsconst 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