持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

router：路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

安装

npm安装：npm install vue-router@4

yarn安装：yarn add vue-router@4

使用

在vue-router中, 我们看到它定义了两个标签和来对应点击和显示部分。就是定义页面中点击的部分，定义显示部分，就是点击后，区配的内容显示在什么地方。所以还有一个非常重要的属性 to，定义点击之后，要到哪里去，如：<router-link to="/home">Home< /router-link>

App.vue中代码示例如下(定义< router-link >和< router-view >)：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>
 
<script>
export default {
  
}
</script>

router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

在 src目录下再新建一个router.js 定义router, 就是定义路径到组件的映射。

import Vue from "vue";
import VueRouter from "vue-router";
 
// 引入组件
import home from "./home.vue";
import about from "./about.vue";
 
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
 
const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]
 
var router =  new VueRouter({
    routes
})
export default router;

在main.js中引入路由，注入到根实例中

import Vue from 'vue'
import App from './App.vue'
 
// 引入路由
import router from "./router.js"    // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
new Vue({
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})

以上是vue-router的大概用法，下一篇我们来讨论路由导航守卫

Vue Router的基本使用

安装

使用

router-link

router-view