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> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
<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">事先定义路由规则的跳转方式</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')
},
}
