Vue路由管理器

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')
        },
}