vue-router

Posted 2021-05-16 Brrby

vue-router

• 项目准备
• 开始写vue-router的效果
• • 使用vue-router
  • • 1. 在main.js里引入vue-router
    • 2. 在src目录下新建routers目录>index.js文件
    • 3. 在components目录下新建Content.vue文件
    • 4. 回到主函数，把路由配置导入进来
    • 5. 把路由跳转的组件放到一个指定位置
• 运行项目

vue-router是 vue.js官方的路由管理器。
vue-router是一个插件包，需要用 npm来进行安装。在项目目录终端输入一下命令进行安装：

npm  install  vue-router  --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

---

项目准备

在上篇文章有写到构建一个基础的vue-cli demo，我们就在那个demo上进行修改：

修改App.vue

修改后是这样的：

这时候demo的不需要的部分就改好了，我们运行下项目：

---

开始写vue-router的效果

停止运行项目(ctrl+c)，在终端输入npm install vue-router --save-dev来安装vue-router。

可以在node_modules目录里看到vue-router的目录、可以在package.json里的devDependencies里看到vue-router。

---

使用vue-router

1. 在main.js里引入vue-router

import VueRouter from 'vue-router'
//使用VueRouter
Vue.use(VueRouter);

2. 在src目录下新建routers目录>index.js文件

3. 在components目录下新建Content.vue文件

4. 回到主函数，把路由配置导入进来

5. 把路由跳转的组件放到一个指定位置

这样vue-router的效果就做好了

---

运行项目

附上demo源码，有需要的可以理解下这样写，提取码：h3pa