Vue-router使用:
參考 ?https://router.vuejs.org/zh-cn/
列子
const router = new Router({
? mode: 'history', ?// 使用history模式 可以去掉路徑中的 #字
? routes: [
? ? {
? ? ? path: '/', ? //路徑
? ? ? name: 'First', ?//自己定義的名稱 ,可隨意寫
? ? ? component: First ?// 路徑對(duì)應(yīng)的vue組件
? ? },
? ? {
? ? ? path: '/login',
? ? ? name: 'Login',
? ? ? component: Login
? ? },
? ? {
? ? ? path: '/index',
? ? ? name: 'Index',
? ? ? component: Index,
? ? ? redirect: { ?//重定向
? ? ? ? name: 'NowData'
? ? ? },
? ? ? children: [ // 子路由
? ? ? ? {
? ? ? ? ? path: 'nowdata',
? ? ? ? ? name: 'NowData',
? ? ? ? ? component: NowData
? ? ? ? },
? ? ? ? {
? ? ? ? ? path: 'historydata',
? ? ? ? ? name: 'HistoryData',
? ? ? ? ? component: HistoryData
? ? ? ? },
? ? ? ? {
? ? ? ? ? path: 'nowposition',
? ? ? ? ? name: 'NowPosition',
? ? ? ? ? component: NowPosition
? ? ? ? }
? ? ? ]
? ? }
? ]
})
export default router
使用router
<keep-alive> ?// 保留當(dāng)前路由生命, 切換當(dāng)前路由不會(huì)重新加載,當(dāng)前路由里面組件也不會(huì)觸發(fā)destroyed()方法
? ? <router-view/>
<keep-alive>
使用標(biāo)簽跳轉(zhuǎn)?基本用法 ?更多參考官方文檔
<router-link to="/login"></router-link>
使用js跳轉(zhuǎn) 基本用法?更多參考官方文檔
this.$router.push({ name:'user'})
在組件中觀察路由變化 在
watch: {
? ??$route (newValue, oldValue) {
? ? ? ? console.log(newValue.name)
? ??????console.log(oldValue.name)
? ? }
}
