vue-router使用方法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

安装

官方文档
Vue Router

安装命令注意版本:

cnpm install --save vue-router@3.5.3

删除命令:

npm uninstall vue-router

提示：安装的时候请注意版本不然会报错：
Uncaught TypeError: Cannot read properties of undefined (reading ‘install’)

解决办法：

出现该情况的原因是vue-router安装的版本太高，一般vue2的项目对应的版本是vue-router@3版本

---

一、配置

提示：需要创建两个配置文件,在src文件夹下创建router.js和项目目录下创建vue.config.js,如图:

创建好后,编写route.js文件

import Vue from "vue";
import VueRouter from  'vue-router'
//导入页面
import pageA from './pages/a.vue'
import pageB from './pages/b.vue'

Vue.use(VueRouter)

const routes=[

    {
    
    
    	//访问路径
        path: '/',
        //对应的文件
        component: pageA
    },
    {
    
    
        path: '/pageb',
        component: pageB
    }
]

const  router =new VueRouter({
    
    
    routes
})
//将router返回出去
export default router

创建好后,编写route.js文件

module.exports={
    
    
    runtimeCompiler:true
}

如果没有将runtimeCompiler设置为true,会报错:
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

在public下的index.html文件添加:

<router-view></router-view>

这样就能访问到了

二、使用router-link

在public下的index.html文件中添加:

<router-link to="在router中配置的访问路径">跳转</router-link>
<router-link to="/pageb">跳转</router-link>