vue vue-router 的基本使用

目录

1. 什么是 vue-router

2. vue-router 安装和配置的步骤

 2.1 在项目中安装 vue-router

2.2 创建路由模块

2.3 导入并挂载路由模块

2.4 声明路由链接和占位符

3. 声明路由的匹配规则 

---

1. 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

2. vue-router 安装和配置的步骤

1. 安装 vue-router 包
2. 创建路由模块
3. 导入并挂载路由模块
4. 声明路由链接和占位符

 2.1 在项目中安装 vue-router

在 vue2 的项目中，安装 vue-router 的命令如下：

npm i vue-router -S

2.2 创建路由模块

在 src 源代码目录下，新建router/index.js 路由模块，并初始化如下的代码：

//src/router/indexjs 就是当前项目的路由模块
import Vue from 'vue';
import VueRouter from 'vue-router';

//把 VueRouter 安装为 Vue 项目的插件
Vue.use(VueRouter)

//创建路由的实例对象
const router = new VueRouter()

export default router

2.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。示例代码如下：

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块，目的：拿到路由的实例对象
import router from '@/router/index.js'
new Vue({
  render: h => h(App),
  // 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router：路由的实例对象
  router: router
}).$mount('#app')

2.4 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符：

<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />

    <!-- 只要在项目中安装和配置了 vue-router,就可以使用 router-view 这个组件了 -->
    <!-- 它的作用很单纯：占位符 -->
    <router-view></router-view>
  </div>
</template>

3. 声明路由的匹配规则 

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下

//导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

//把 VueRouter 安装为 Vue 项目的插件
Vue.use(VueRouter)

//创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [{ path: '/home', component: Home },
  { path: '/movie', component: Movie },
  { path: '/about', component: About }],
})