Vue默認沒使用路由管理器
安裝路由
npm install vue-router
新建路由配置文件router.js
屬性有component掌测、redirect
import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home/index.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', //根網址訪問嫡纠，顯示home組件
name: 'home',
component: Home
}
]
})
App.vue根組件下耳峦，加入路由標簽
<template>
<div id="app">
<router-view/>
</div>
</template>
路由頁面緩存
<keep-alive> 包裹動態(tài)組件時闻葵，會緩存不活動的組件實例娃惯，而不是銷毀它們禽翼。和 <transition> 相似简卧，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素兔魂，也不會出現在父組件鏈中。
當組件在 <keep-alive> 內被切換举娩，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執(zhí)行
<template>
<keep-alive>
<router-view/>
</keep-alive>
</template>
main.js下引入router模塊析校，即可實現路由功能
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
路由跳轉：
<router-link to="/list">簡單跳轉1</router-link>
<hr/>
<router-link to="list">簡單跳轉2</router-link>
<hr/>
<router-link tag="p" to="/list"> p跳轉</router-link>
<hr/>
<router-link to="list/6">事先定義路由規(guī)則的跳轉方式</router-link>
<hr/>
<span>訪問:http://localhost:8080/#/list/12 得到id</span>
<div>路由id：{{this.$route.params.id}}</div>
<hr/>
<div>home跳過來的id：{{this.$route.query.id}}</div>
<div>home跳過來的name：{{this.$route.query.name}}</div>
<!-- 綁定屬性，帶參數的跳轉方式 -->
<router-link :to='{path:"/list",query:{id: 3,name:"abc"} }'>
帶參數的跳轉
</router-link>
//JS跳轉
<button @click="jump">JS跳轉</button>
methods:{
jump(){
this.$router.push('./list')
},
}
