Vue Router 新手入门指南（1）：路由怎么使用？

概念

我们要知道的是Vue是单页应用，整个项目只有一个html文件。在public目录下的index.html文件是整个项目中唯一的html文件。在vue中我们写的每一个页面其实都是一个html代码片段，通过特殊的手段实现每次只让一个代码片段生效，也就模拟成了多个html文件一样的效果。其实大概意思就是，比如说：

假设我们要实现三个页面home，detail和user的效果，那么我们把写好的它们三个的代码片段都放在一个html中，当我们要看到home页面的时候，我们就只让home的代码片段生效，另外的不生效，我们要去user页面的时候，就让user的代码片段生效其他的完全不显示。

那我们为什么要创建单页面应用，而不是多个页面就多个html文件来实现呢？举个例子：

掘金的每个页面都有这个导航栏头部，那这么多个页面，岂不是每个页面都要写一遍这个头部的代码，这样代码的复用性就会极低。

还有就是，如果是多页应用，你每去到一个新的页面，浏览器都要新开一个窗口，如果网络没那么好，每新到一个页面都要先空白一下才加载出来，其实这对用户的体验是非常不好的。而单页应用只有一个html，你去到其他页面不用新开窗口，当你看到一个页面的时候，其他页面的代码也是加载了的，只不过是不显示，那么你去到别的页面就不耗时，因为已经加载好了。

讲到这里，我们终于要进入正题了。我们说通过特殊的手段实现每次只让一个代码片段生效，这个特殊手段，就是今天的主角路由。

准备

首先我新建一个叫vue-router的vue项目，建好后就会生成这些文件：

然后右键vue-router打开它的终端，输入npm run serve命令将项目运行起来，Ctrl+单击 第一个地址：

我们就会在浏览器中看到src目录下的App.vue页面：

来到项目的最后一个文件vue.config.js中，把代码校验lintOnSave设为false，记得保存代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

把创建这个项目给我们生成的一些展示性代码删掉：components目录下的HelloWorld.vue可以删掉，App.vue里面的内容全部删除，然后vb+回车快捷键（需要安装Vue VSCode Snippets插件）生成以下代码：

然后将style里的scss改成基础的css，给div中加个类名nav，再输入首页 沸点 课程，保存后就能在浏览器上看到页面变成了这样：

<template>
  <div>
    首页
    沸点
    课程
  </div>
</template>

<script>
  export default {

  }
</script>

<style lang="css" scoped>

</style>

如何使用路由

现在我们需要点击首页就能去到首页页面，点击沸点就能去到沸点页面，点击课程就能去到课程页面。我们首先要先创建这三个页面，在src中新建一个文件夹views，然后在views中新建文件Home.vue、Class.vue、Hot.vue：

此时我们还没给它配路由，其实它们还不算是页面，只能说是组件。在Home.vue中输入以下代码，其他两个类似，使用快捷键vb+回车的话要记得将style中的scss改成css:

<template>
    <div>
        home page
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="css" scoped>

</style>

现在我们在终端中Ctrl+c将项目终止，输入npm install vue-router@4指令安装路由，安装好后我们就能在和src目录同级的node_modules文件夹下找到我们刚刚安装的vue-router了：

路由怎么用呢？

我们先在src目录下新建文件夹router，在router中新建文件index.js。我们要在里面使用路由，我们就要先引入路由import {createRouter} from 'vue-router'，然后创建一个空数组routes，再定义一个router等于createRouter()的执行结果，router就是路由的实例对象，在createRouter()中放一个对象，里面有routes和history两个属性,history属性的值为createWebHistory()，此时我们还要从vue-router中引入createWebHistory。要让这个路由实例能被别的地方使用，我们还要抛出它export default router：

import { createRouter,createWebHistory } from 'vue-router'

const routes = []

const router = createRouter({
    routes: routes,   // 右边的值routes为我们上面定义的数组routes
    history: createWebHistory()
})

export default router

抛出后要能被使用，还需要引入，我们来到与router同级的main.js文件下引入import router from './router/index.js'，还要使用它.use(router)，注意要放在mount之前：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

createApp(App).use(router).mount('#app')

现在我们写的这个路由文件就能生效了，接下来我们来配置路由。

来到router下的index.js文件。我们要把什么定义成页面就把什么引入进来，我们需要把views文件夹中的Home.vue定义成页面，那么就引入import Home from '../views/Home.vue'，接下来配置它的路由，在routes数组中添加一个对象，放一个path，路径为'/home'，再放一个component，值为Home，就是我们要引入进来的组件Home，其他两个页面类似：

import {createRouter,createWebHistory} from 'vue-router'
import Home from '../views/Home.vue'


const routes = [
    {
        path:'/home',
        component:Home,
    },
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue') // 另一种写法，无需在顶部引入
    },
    {
        path:'/class',
        component:()=>import('../views/Class.vue')
    }
]

const router = createRouter({
    routes,
    history:createWebHistory()
})

export default router

之后到App.vue文件中，添加一个路由路口<router-view></router-view>，所有配了路由的页面都会在该口子上展示：

我们在终端npm run serve将项目重新运行起来，在浏览器的地址栏手动加上我们之前给Home页面配置的路径'/home'，回车后就能看到页面变成了这样，Home页面的内容在路由路口的位置展示出来了：

我们再给首页加上<router-link></router-link>标签，在标签里加to="/home"属性，其他两个类似：

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/hot">沸点</router-link>
    <router-link to="/class">课程</router-link>
  </div>
  <!-- 路由路口 -->
  <router-view></router-view>

</template>

这一步完成后，我们到浏览器页面上就会发现，点击哪个，就会出现对应页面的内容：

现在的页面有点简陋，我们稍微加一点点样式：

<template>
  <div class="nav">
    <router-link to="/home">首页</router-link>
    <router-link to="/hot">沸点</router-link>
    <router-link to="/class">课程</router-link>
  </div>
  <!-- 路由路口 -->
  <div class="page">
    <router-view></router-view>
  </div>

</template>

<script>
  export default {

  }
</script>

<style lang="css" scoped>

.nav{
  width: 800px;
  background-color: #bfecc6;
  margin: 0 auto;
  font-size: 30px;
  padding: 10px 20px;

}
a{
  text-decoration: none;
  margin-right: 30px;
}
.page{
  width: 1000px;
  margin: 0 auto;
  background-color: #eaf8f2;
  height: 1000px;
  font-size: 24px;
  padding: 30px;
}
</style>

现在是这个效果：

二级路由

如果我们想要像掘金首页那样，到首页后还有推荐和最新两个页面可以切换，就要用到二级路由了。

首先创建这两个页面，在views中创建一个homeChild文件夹，在文件夹中创建Suggest.vue和Newest.vue文件，在Suggest文件中写以下代码，添加了一个列表，另外一个文件类似，内容可以你们自己定义：

<template>
    <div>
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="css" scoped>

</style>

再去给他们配二级路由，到路由的配置文件index.js里，在配置Home页面路由的对象中加一个children属性，值为数组，在数组中配置这两个页面的路由：

const routes = [
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'/home/suggest',
                component:()=>import('@/views/homeChild/Suggest.vue') // @表示src文件夹
            },
            {
                path:'newest',
                component:()=>import('@/views/homeChild/Newest.vue')
            }
        ]
    },
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue')
    },
    {
        path:'/class',
        component:()=>import('../views/Class.vue')
    }
]

在Home.vue中添加路由入口和链接：

<template>
    <div class="home">
        <h2>这是首页</h2>
        <nav>
            <router-link to="/home/suggest">推荐</router-link>
            <router-link to="newest">最新</router-link>
        </nav>

        <router-view></router-view>


    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="css" scoped>
nav a{
    margin-left:20px;
}
</style>

那么现在到浏览器上点击推荐，页面就会变成这个样子了：

现在还有个小问题就是，如果我点去了沸点，然后点回首页，这个时候是需要能让我们看到推荐的内容的，但现在的效果我们是看不到的，必须得我们手动点击推荐，推荐页面的内容才会出来。同样的，我们需要浏览器上一打开就能出现首页的内容，而不是光秃秃的只有一个导航栏，点击首页才出现首页的内容。有什么办法能帮我们解决这个问题吗？有，那就是重定向。

重定向

我们在配置路由的index.js中，加上以下重定向的代码就好啦：

const routes = [
    {
      path:'/',
      redirect:'/home'  //重定向，默认到这个页面
    },
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'',
                redirect:'/home/suggest'//重定向 路径得写全
            },
            {
                path:'/home/suggest',
                component:()=>import('@/views/homeChild/Suggest.vue')
            },
            {
                path:'newest',
                component:()=>import('@/views/homeChild/Newest.vue')
            }
        ]
    },
    {
        path:'/hot',
        component:()=>import('../views/Hot.vue')
    },
    {
        path:'/class/:id',
        name:'class',
        component:()=>import('../views/Class.vue')
    }
]

现在就已经实现了我们想要的效果。

本文路由怎么使用的知识到这就讲完啦，欢迎下次再来一起学习ヾ(◍°∇°◍)ﾉﾞ！！下篇将讲述路由跳转及如何携带参数。