【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文件夹方便查看

// 引入路由
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 然后开始配置路由

// 先引入路由文件
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>

给自己挖坑往下跳

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

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

<!-- 错误示范 -->
<template>
  <div id="app">
    <main/>
  </div>
</template>

记得设置组件显示位置经常性忘记