乐趣区

关于前端:Vue-Router-的使用

jiezi

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

退出移动版