VUE学习笔记——路由

基本路由

1、定义路由组件：src/views/About.vue

<template>
  <div>
    About
  </div>
</template>

2、配置路由模块（映射成路由）：src/router/index.js

//第一：引入vue-router 及各路由组件
import Vue from 'vue'
import Router from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
import MessageDetail from '../views/MessageDetail.vue'
//第二：
Vue.use(Router)
//第三：
export default new Router({
  routes: [{
    path: '/',      // 自动跳转路由
    redirect: '/about'
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home/news',
        component: News
      },
      {
        path: 'message', //简写
        component: Message,
        children: [
          {
            path: '/home/message/detail/:id',   //占位
            component: MessageDetail
          }
        ]
      },
      {
        path: '',       //空表示当前路由
        redirect: '/home/news'
      }
    ]
  }
  ]
})

3、注册路由器：src/main.js（入口文件）

import Vue from 'vue'
import App from './App.vue'
//引入router
import router from './router'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  //配置路由
  router
})

4、应用组件：App.vue

<div>
	 <!--路由链接--> 
	 <router-link to="/about">About</router-link> 
	 <router-link to="/home">Home</router-link> 
	 <!--用于渲染当前路由组件--> 
	 <router-view></router-view> 
 </div>

嵌套路由

1、配置嵌套路由: src/router/index.js

path: '/home',
    component: Home,
    children: [
      {
        path: '/home/news',
        component: News
      },
      {
        path: 'message', //简写
        component: Message,
        children: [
          {
            path: '/home/message/detail/:id',   //占位
            component: MessageDetail
          }
        ]
      }

2、路由链接: Home.vue

<router-link to="/home/news">News</router-link> 
<router-link to="/home/message">Message</router-link> 
<router-view></route-view>

缓存路由组件对象

<keep-alive> 
	<router-view></router-view> 
</keep-alive>

向路由组件传递数据

一、路由路径携带参数

方式1：param

1、配置路由: src/router/index.js

{
   path: 'message', 
   component: Message,
   children: [
     {
     	name:'id1'
     	// 后面的 ? 表示，这个id可传可不传
       path: '/home/message/detail/:id?',   //占位
       component: MessageDetail
     }
   ]
 }

2、配置路由: src/views/Message.vue

<template>
  <div>
    <ul>
      <li v-for="(message,index) in messages" :key="message.id">
        <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
        //或者：命名路由传递的参数值不会在url中显示,name 是路由的名字
        <router-link :to="{ name:'id1', params: {id: message.id} }">{{message.title}}</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

3、 路由组件中读取请求参数: src/views/MessageDetail.vue

export default{
    mounted(){
        console.log(this.$route.params.id);
    }
}

方式2：query

1、配置路由: src/router/index.js

{
   path: 'message', 
   component: Message,
   children: [
     {
       path: '/home/message/detail',
       component: MessageDetail
     }
   ]
 }

2、配置路由: src/views/Message.vue

<template>
  <div>
    <ul>
      <li v-for="(message,index) in messages" :key="message.id">
        <router-link :to="`/home/message/detail?id=${message.id}`">{{message.title}}</router-link>
        //或者：
        <router-link :to="{ path:'/home/message/detail', query: {id: message.id} }">{{message.title}}</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

3、 路由组件中读取请求参数: src/views/MessageDetail.vue

export default{
    mounted(){
        console.log(this.$route.query.id);
    }
}

总结

1、params要用name来引入路由；
query要用path来引入
2、params则类似于post，即在浏览器地址栏中不显示参数；
query类似于ajax中get传参，即在浏览器地址栏中显示参数
3、params是路由的一部分,必须要在路由后面添加参数名；
query是拼接在url后面的参数，没有也没关系

二、router-view属性携带数据

父组件向子组件传值

父组件：
<router-view msg="123"></router-view>

子组件：
<template>
	<p>{{msg}}</p>
<template>
<script>
	export default{
		props:{
			msg:String
		}
	}
</script>

编程式路由导航

1、 this.$router.push(path) 相当于点击路由链接(可以返回到当前路由界面)
2、 this.$router.replace(path) 用新路由替换当前路由(不可以返回到当前路由界面)
3、 this.$router.back() 请求(返回)上一个记录路由
4、 this.$router.go(-1) 请求(返回)上一个记录路由
5、this.$router.go(1) 请求下一个记录路由

<template>
  <div>
    <ul>
      <li v-for="(message,index) in messages" :key="message.id">
        <router-link :to="{ name:'id1', params: {id: message.id} }">{{message.title}}</router-link>
        <button @click="pushShow(message.id)">push查看</button>
        <button @click="replaceShow(message.id)">replace查看</button>
      </li>
    </ul>
    <button @click="$router.back()">回退</button>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
......
methods: {
   pushShow(id){
     this.$router.push(`/home/message/detail/${id}`)
   },
   replaceShow(id){
     this.$router.replace(`/home/message/detail/${id}`)
   }
    }
</script>

控制某组件在不同路由下显示/隐藏

解决方案: 利用路由的meta配置和v-show / v-if

router/routes.js :

{
  path: '/register',
  component: Register,
  meta: { // 需要隐藏footer的路由添加此配置
    isHideFooter: true
  }
},

{
  path: '/login',
  component: Login,
  meta: {
    isHideFooter: true
  }
},

App.vue :

<Footer v-show="!$route.meta.isHideFooter"/>