router基础使用

 1.安装router

npm i vue-router@3

安装后

2.写出路由界面

接着

3.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../views/Home.vue"
import About from "../views/About.vue"
Vue.use(VueRouter)
 
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]
 
const router = new VueRouter({
  routes
})
 
export default router
 

4.在main.js挂载路由

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

import router from './router';//此处省略index.js，会默认去读取

5.写路由出口

在App.vue中写<router-view>

6.子路由

const routes = [
	{ 
		path: '/', 
		component: Main ,
		children:[
			{ path: 'home', component: Home },
			{ path: 'about', component: About }
		]
	},
 
]

这里子路由不能是/about这种带斜杠的，会报错

记得在主路由下写路由出口（指App.vue下一个路由出口，主路由下一个路由出口），这样才能显示出子路由

子路由运用，比如后台管理系统，上面导航和左侧导航不变，只变右下的区域，这时候就用子路由

注意！这里是path: '/', 不是path: '/'main, 

前者直接/子路由就可以跳转，后者必须/main/子路由