学习Vue Router，这一篇足够

最新推荐文章于 2024-07-01 15:42:38 发布

原创最新推荐文章于 2024-07-01 15:42:38 发布 · 224 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue-router 专栏收录该内容

1 篇文章

订阅专栏

本文介绍Vue Router的基本使用方法，包括安装、配置路由、组件映射、动态路由、嵌套路由及编程式导航等内容。

前言

Demo代码
Vue Router 是Vue.js的官方路由管理器。使用Vue Router 后，我们就想玩积木一样组合组件完成应用开发，基本思想：将组件映射路由，告诉Vue Router 在哪里渲染就阔以了。

基本使用步骤

安装 Vue Router

npm install vue-router

在src目录下创建router/index.js文件,并注册路由

import vue from 'vue'
import vueRouter from 'vue-router'

// 1.注册路由插件
vue.use(vueRouter)

映射路由和组件

// 2.映射组件和路由
let routes = [
    { path: '/', component: Home },
    { path: '/about', component: () => import(/* webpackChunkName: "about" */'../views/about.vue')}
]

创建router

// 3.创建router对象，传入routes
const router = new vueRouter({
    routes
})

export default router

在main.js文件创建vue对象时，将router注册

import router from './router'
new Vue({
  // 4.注册router
  router,
  
  render: h => h(App),
}).$mount('#app')

在app.vue文件，设置路由入口和出口

 <!-- 5.使用 router-link导航-->
 <router-link to = "/">home</router-link>
 <router-link to = "/about">about</router-link>
 <!-- 6. router-view 设置路由出口-->
 <router-view></router-view>

动态路由

有时间我们需要将某种规则的路由匹配到一个组件中，比如：任务简介组件（About.vue），对于所有不同id的用户都应该对应About组件,像/about/123和/about/134都应该映射到同一个About组件中。

动态路径参数以冒号:做标记

  {
    path: '/about/:id',
    name: 'About',
    // props为true时，接收参数使用props
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

如何获取动态路径参数？

通过$route.params对象获取
通过路由设置props后，使用props获取

<!-- 第一种方式:$route.params -->
<div>id的值: {{$route.params.id}}</div>

<!-- 第二种方式 props -->
<div>id的值: {{id}}</div>

<script>
export default {
  name: "About",
  props: ["id"],  
}
</script>

嵌套路由

路由嵌套
在页面开发中，home页面和about页面头部（header）和底部（footer）内容一致，只有中间区域不同，在这种情况下，就会用到嵌套路由。

首先将定义一个总的布局组件Layout.vue,中间部分根据不同路由渲染不同的组件。
路由配置：

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children:[{
        // 相对路径
        path: '',
        name: 'Home',
        component: Home
      },
      {
        path: 'about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

在app.vue 和 Layout.vue公共部分使用router-view占位
app.vue

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

Layout.vue

<template>
  <div>
    <div>
      <img width="25%" src="@/assets/logo.png">
    </div>
    <div>
      <router-view></router-view>
    </div>
    <div>
      Footer
    </div>
  </div>
</template>

编程式导航

除了使用<router-link>定义导航链接，还可以借助router的实例方法。下面分类介绍一下：
不带参数导航

// 字符串
this.$router.push('about');

// 对象-path
this.$router.push({path:'about'})

//对象-name
this.$router.push({name:'About'})

// router-link
<router-link to='about'>router-link</router-link>

动态路由

// push-name
this.$router.push({name: 'Dynamic', params: { id: '123' }})

// router-link
<router-link to='/dynamic/123'>router-link</router-link>

// router-link-params
<router-link :to="{ name: 'Dynamic', params: { id: 123 }}">router-link-params</router-link>

带查询参数

// 带查询参数，变成query?name=query-router
this.$router.push({path: 'query', query : { name: "query-router"}})  
this.$router.push({name: 'Query', query : { name: "query-router"}})