vue-router的简单使用

一、下载

1.npm下载引入vue-router (npm install vue-router@3)

下载后可以去package.json文件中看一下vue-router的版本

2.当时我在版本这里有遇到一个问题：当时版本是4.0以上且报错obj 问题

我当时的解决办法是降低版本为3.0版本的，然后重新运行项目，当时降低版本后问题依然没解决，直到重启编辑器，并重新运行项目就莫名解决了（大神知道原因的话欢迎指导）

二、创建路由

1下载完成后创建一个js文件作为配置路由的文件（我的是router.js），下面是我的项目结构和router.js代码

import Vue from "vue";
import VueRouter from "vue-router";
import home from "./showview/home.vue";
import about from "./showview/about.vue";
Vue.use(VueRouter);	
//创建路由 path 指路径，component 指的是组件。
const routes = [
  { path: '/home', component: home },
  { path: '/about', component: about }
]
var router =  new VueRouter({
	mode: 'history',//就会使用默认的 hash 模式以#开头，设置history没#
  routes // routes: routes 的简写
})
export default router

三、路由的使用

 1在main.js中引入router.js文件使用

import Vue from 'vue'
import App from './App.vue'
//引入router
import router from './router.js'
new Vue({
	router,
  render: h => h(App)
}).$mount('#app')

2在自己的页面中使用

我的是app.vue中用的，注意：to后面的路径和path的区别

到这里就可以在页面上查看效果了

<router-link to="about">文件1</router-link>
<router-link to="home">文件3</router-link>
<!-- router路由展示 -->
<router-view></router-view>

 介绍的不好的地方还请多多包涵，（也欢迎大神的指导）