Vue-Router的使用

一、安装vue-router库

//执行其中一个命令，安装vue-router库
npm install vue-router  / yarn add vue-router 
//可以指定引入vue-router@3 版本，4版本不支持vue2会导致报错，所以使用vue2时候需要指定以下该版本

二、引入

//main.js中添加以下代码引入
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//如果使用全局script标签，则不用这么干

三、启动，默认跳转App.vue页面

//app.vue
<template>
  <div id="app">
    <div>测试，这是默认首页，{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      message: 'App.vue',
    }
  },
  mounted() {
    console.log('process.env', process.env)
  },
}
</script>

启动后的页面为

然后我们开始配置路由

四、新建router/index.js配置路由文件

//index.js

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

//定义路由配置，以及对应的组件/页面
const routes = [
  {
    path: '/',
    name: 'homePage',
    title: 'home页',
    component: () => import("@/pages/home/index.vue"),
  },
  {
    path: '/main',
    name: 'mainPage',
    title: 'main页',
    component: () => import("@/pages/main/index.vue"),
  },
]

//创建路由实例，还有一些额外的参数可以传递，后续可做补充
//如beforeEnter、beforeRouterLeave....等
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

五、新建路由中的页面

//home.vue

<template>
  <div>
    <div>测试，这是默认首页</div>
    <div @click="goto('mainPage')">点击跳转到main页</div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  props: {},
  data() {
    return {}
  },
  methods: {
    goto(pathName) {
      this.$router.push({ name: pathName })
    },
  },
}
</script>
<style lang="less" scoped></style>


//main.vue

<template>
  <div>这是页面主页</div>
</template>

六、修改App.vue文件

//app.vue

<template>
  <div id="app">
    <div>测试，这是默认首页</div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {}
  },
  mounted() {
    console.log('process.env', process.env)
  },
  methods: {},
}
</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>

七、启动

执行命令：yarn dev / npm run dev

启动后可以看到：

然后我们点击 “点击跳转到main页”

然后我们的路由就配置成功啦！

八、vue3中使用的vue-router 4.x与当前3.x的区别

1、新建v3版本的项目

2、安装vue-router（此一步在通过npm create projectName可以直接选择上）

3、在引入时候是有一定的区别，4.x版本的引入需要采用按需引入的方式，示例代码：

//router/index.js

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',

      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

//main.js

import './assets/main.css'

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

const app = createApp(App)

app.use(router)

app.mount('#app')

//App.vue;此处是采用的vue3里的组合式组件写法
//此处也省略了其他的一些代码，（可参考上述app.vue来编写）

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

4、启动，即可正常按照路由跳转

路由传参、动态路由匹配、路由守卫等后续会继续添加