单文件 vue 系统 vue-router 基础使用教程

单文件 vue 系统 vue-router 基础使用教程

官方 vue-router 教程： ​​https://router.vuejs.org/guide/essentials/dynamic-matching.html​​​ 官方 vue-cli 教程： ​​https://cli.vuejs.org/zh/guide/​​

前提

已经用 ​​vue-cli​​​ 新建了 ​​vue​​ 项目框架

1、添加 vue-router 插件

在 ​​package.json​​​ 文件中添加 ​​vue-router​​

"dependencies": {
 "axios": "^0.19.0",
 "core-js": "^3.6.1",
 "vue": "^2.6.10",
 "vue-router": "^3.1.3"  // 添加该行
}

然后在命令行中切换到当前项目目录，执行如下指令完成插件的安装:

npm i

2、添加显示框架

​​App.vue​​​ 中添加这个 ​​router-view​​ 标签，用于显示路径变换时载入的组件内容

<router-view/>

// 下面这个标签相当于 html 中的 <a> 标签
<router-link to="要去的路径"></router-link>

3、新建并在 vue 中添加 router对象

​​vue-router​​​ 的使用原理是这样的：
新建 ​​​VueRouter​​​ 的时候输入一个 ​​{ 路径, 组件 }​​​ 的数组，生成一个 ​​Router​​​ 并在新建应用的时候输入这个 ​​VueRouter​​ 对象

在使用的时候需要两个标签支持：

• ​​<route-link to="/characters">​​​ 相当于​​html​​​ 中的​​<a href="/characters">​​
• ​​<route-view>​​ 是用于显示路径变化时，对应的组件会显示在这个标签里面

添加 ​​VueRouter​​​ 的 ​​main.js​​ 这样写

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.config.productionTip = false;

// 在 vue 中应用 vue-router
Vue.use(VueRouter);

// 比如我有两个页面，
import characters   from '../components/Characters'
import mobs         from '../components/Mobs'

// VueRouter 接收的是个数组，里面对应的路径名和调用的组件
const routes = [
    {path: '/characters',   component: characters},
    {path: '/mobs',         component: mobs},
]

// 新建 router 对象
const router = new VueRouter({
  routes
});

new Vue({
  router,  // 这个是 es6 的缩写，当变量名跟变量一样时就可以这样写，相当于： router: router
  render: h => h(App)
}).$mount('#app');

结果