node下路由
npm install vue-router 安装vue2.0的路由
npm install vue-router@next 安装vue3.0的路由
npm i vue-router@next install简写成i
第一步：引入路由模块
import {createRouter,createWebHashHistory} from 'vue-router'
第二步：定义跳转的模块
import Center from '../components/Center.vue';
第三步：配置路径
var routes=[
{path:"/index",name:"index",component:Center},
]
第四步：创建路由对象
var router=createRouter({
history:createWebHashHistory(process.env.BASE_URL),
routes
})
export default router
子路由定义：
var routes=[
{path:"/index",name:"index",component:Center},
{path:"/main",name:"main",component:Main,
children:[
{path:"/a",compinent:Work1},
{path:"/b",compinent:Work2},
]
}
]
js下跳转路由：
<router-link :to="{path:'/index',query:{name:'lisi',age:23}}"></router-link>
router.push({
path:'/index',
query:{name:'lisi',age:23}
})
简答：
1、vue路由的钩子函数？
首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next：
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
2、$route和$router的区别？
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
3、完整的 vue-router 导航解析流程
导航解析流程:
导航被触发,在失活的组件里调用离开守卫;调用全局的 beforeEach 守卫;在重用的组件里调用 beforeRouteUpdate 守卫;在路由配置里调用 beforeEnter;解析异步路由组件;在被激活的组件里调用 beforeRouteEnter;调用全局的 beforeResolve 守卫 (2.5+);导航被确认;调用全局的 afterEach 钩子;触发 DOM 更新;用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
