【Vue】VueRouter 初次配置笔记
反射的棱镜 Lv1

【Vue】VueRouter 初次配置笔记

初次配置VueRouter

1.安装VueRouter

注:Vue 2.x 只能安装VueRouter 3 | Vue 3.x 才能安装 VueRouter 4,目前记录的是Vue 2.x 所以安装VueRouter3

1
npm install vue-router@3

如果是Vue 3.x 将后面@3改为@4即可

2.在 main.js 注册路由

这里将路由路径设置为了router文件夹 方便查看

1
2
3
4
5
6
7
8
9
10
11
12
13
// 引入路由
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'

// 应用路由
Vue.use(VueRouter)

// 使用路由
new Vue({
render: h => h(App),
router: router // 路由配置项
}).$mount('#app')

3.配置路由文件

新建一个文件夹名为 router 跟上面引入路由器的路径一样 在里面建立文件为index.js 然后开始配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 先引入路由文件
import VueRouter from "vue-router";
// 引入需要路由的组件 这里引入2个做例子
import main from "../components/main" // .vue后缀写与不写都可以
import about from "../components/about"

// 创建路由器
export default new VueRouter({
routes:[
{
path:'/', // 重定向 默认进入的baidu.com 则会进入baidu.com/main
redirect:'/main' // 这里则定义进入的路径
},
{
path:'/main', // 路径
component:main // 这里为定义的组件
},
{
path:'/about',
component:about
}
]
})

4.实现跳转路径

使用标签 router-link 进行跳转 to=“为跳转的路径”

1
<router-link to="/about">点击跳转</router-link>

5.呈现组件显示位置

指定要切换页面的位置 使用router-view标签呈现

1
2
3
<template>
<router-view></router-view>
</template>

给自己挖坑往下跳

  1. 一定要设置重定向 不然载入网址什么都没有

  2. 不要让路由的组件在App.vue里注册 不然会报错而且会显示出来

    1
    2
    3
    4
    5
    6
    <!-- 错误示范 -->
    <template>
    <div id="app">
    <main/>
    </div>
    </template>
  3. 记得设置组件显示位置 经常性忘记

  • 本文标题:【Vue】VueRouter 初次配置笔记
  • 本文作者:反射的棱镜
  • 创建时间:2022-05-15 03:25:24
  • 本文链接:https://maid.ink/2022/05/15/【Vue】VueRouter 初次配置笔记/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!