Vue系列教程（17）- 路由（vue-router）-阿里云开发者社区

Vue系列教程（17）- 路由（vue-router）

2023-11-16 63

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue系列教程（17）- 路由（vue-router）

1. 引言

通过前面的章节，我们已经学会了使用webpack来对vue项目进行打包，有兴趣的同学可以参阅下：

本文主要讲解的是vue直接的页面跳转，即使用路由vue-router来实现。

2. 什么是vue-router

Vue Router是Vue.js官方的路由管理器

它和Vue.js的核心深度集成，让构建单页面应用变得简单

2. vue-router案例

2.1 创建项目

2.1.1 项目初始化

①新建vue-router-demo项目，并使用vscode打开（open）:

②菜单栏：Terminal -> new Terminal，并输入命令，并选择Vue 2:

vue create vue-router-demo

③创建成功：

④ 删除components文件夹里面的HelloWorld.vue文件:

⑤ 修改App.vue文件，内容如下：

<template>
  <h1>App页面</h1>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.1.2 新增需要跳转的两个模块

路由需要跳转到指定的模块，下面来定义需要跳转到的两个模块。

①在components文件夹里新建两个文件，Content.vue和Main.Vue：

② Content.vue的内容如下：

<template>
  <div>
    <h1>内容页</h1>
  </div>
</template>
<script>
  export default {
    name: "Content"
  }
</script>
<!--scoped表示作用域只为当前组件-->
<style scoped>
  h1 {
    color: orange;
  }
</style>

③ Main.vue的内容如下：

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped>
  h1 {
    color: cornflowerblue;
  }
</style>

2.2 vue-router路由配置

2.2.1 安装vue-router插件

① 首先安装vue-router路由插件，进入当前项目,命令行输入：

cd vue-router-demo/
npm install vue-router --save-dev

② 可以看到在node-modules里新增了vue-router依赖:

2.2.2 配置路由表

在src目录下，新建一个router文件夹，专门存放路由，配置路由index.js，如下:

import Vue from 'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Content from '../components/Content'
import Main from '../components/Main'
//安装路由
Vue.use(Router);
//配置路由
export default new Router({
  routes: [
    {
      //路由路径
      path: '/content',
      //路由名称
      name: 'content',
      //跳转到组件
      component: Content
    }, {
      //路由路径
      path: '/main',
      //路由名称
      name: 'main',
      //跳转到组件
      component: Main
    }
  ]
});

2.2.3 导入声明

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能，即在main.js文件声明导入使用vue-router，完整代码如下：

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' // 导入VueRouter模块
//导入上面创建的路由配置目录
import router from './router' //自动扫描里面的路由配置
Vue.use(VueRouter); // 使用VueRouter模块
// 关闭生产模式下给出的提示
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

2.3 使用路由

① 在App.vue里使用路由，完整代码如下：

<template>
  <div id="app">
    <!--
      router-link：默认会被渲染成一个<a>标签，to属性为指定链接
      router-view：用于渲染路由匹配到的组件
    -->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

② 运行程序

npm run serve

③ 浏览器输入地址：http://localhost:8080/ ，可以看到

默认加载	点击首页	点击内容

最后，运行的时候，控制台如果出现如下错误，解决方案可以查看：https://segmentfault.com/a/1190000006435886