vue路由使用步骤

一、使用
import {RouterLink, RouterView} from ‘vue-router’;
Home
订单详情

或者

如果用el-menn-list组件，在@select事件中写：
this.$router.replace(menu.menuUrl)

事件触发，如点击后：
this.$router.push(‘/myproject’)

二、路由分2种：
1.hash
1.1#,
1.2根据window.onhashchange监听，
1.3一般用于单页面应用，hash变化不会请求后台

2.history
2.1没有#
2.2根据 back(), forward() go()等方法跳转，pushState(),replaceState()保存替换状态
2.3最重要一点是history路由害怕刷新，因为切换路由后浏览器中url改变，再刷新的话会重新向服务器发送请求，所以后端需要做简单的配置。

路由使用步骤：
1.引入Router
import Router from ‘vue-router@3.0.1’
或者cdn方式引入
Vue.use(Router);

2.引入需要路由的组件
import Home from ‘Home.vue’

3.创建路由对象
export default new Router({
routes:[ // 路由规则
{path:‘/’,name:‘home’,component:Home},
{path:‘/login’,name:‘login’,component:Login},
]
})

4.vue根实例配置
把创建的router对象，创建到根实例中
import Router from ‘./router’

new Vue({
router,
store,
render:h => h(App)
}).mount(‘#app’)

5.组件中配置
在需要加路由的组件中配置2个字段
Home

6.路由守卫
beforeRouteEnter((to, from, next)=>{
console.log(‘进入前’)
console.log(to)
console.log(from)
})

beforeRouteUpdate((to, from, next)=.{
console.log(‘复用前’)
console.log(to)
console.log(from)
})

beforeRouteLeave((to, from, next)=>{
console.log(‘离开前’)
console.log(to)
console.log(from)
})