vue router应用及总结

编写一个小的demo，对router基础的应用学习和理解。

效果图示：

说明: 点击About在右边显示相关信息.

说明: 点击Home，在下边显示相关信息，且Home下有两个路由链接，分别对应各自的路由组件.

说明: Message下有三个路由链接，对应的路由组件只有一个，只是根据传入的参数不同显示不同数据。

项目目录：

代码：

1.index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-project</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <style>
      .router-link-active {
        color: red !important;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.index.js(router模块)

/**
 * 路由器对象模块
 */
import Vue from 'vue';
import Router from 'vue-router'
import Home from '../views/Home'
import About from '../views/About'
import News from '../views/News'
import Message from '../views/Message'
import MessageDetail from "../views/MessageDetail";
// 声明使用vue-router插件
/*
内部定义并注册了2个组件标签(router-link/router-view),
给组件对象添加了2个属性:
  1. $router: 路由器
  2. $route: 当前路由
 */
Vue.use(Router)
export default new Router({
  // 注册应用中所有的路由
  routes: [
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/home/news',   // 绝对路径：path左侧的'/'永远代表跟路由
          name: 'News',
          component: News
        },
        {
          path: 'message',  // 相对路径
          name: 'Message',
          component: Message,
          children: [
            {
              path: 'detail/:id',  // id是变化的, :id 占位符来显示
              name: 'MessageDetail',
              component: MessageDetail
            }
          ]
        },
        {
          path: '',
          redirect: 'news'
        }
      ]
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})

3.main.js

/**
 * 入口js
 */
import Vue from 'vue'
import App from './App'
import router2 from './router'
new Vue({   // 配置对象的属性名都是一些确定的名称，不能随便修改
  el: '#app',
  components: {App},  // 映射组件标签
  template: '<App/>',   // 指定需要渲染到页面的模板
  router: router2   // 注册路由器
})

4.App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接：链接与路由配置中path一致-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 缓存路由组件对象 -->
            <keep-alive>
              <!-- 显示当前组件，并向路由组件传递数据（属性携带数据），与props用法类似 -->
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'App',
  }
</script>
<style>
</style>

5.About.vue

<template>
  <div>
    <h2>About</h2>
    <input type="text" />
    <h4>{{msg}}</h4>
  </div>
</template>
<script>
  export default {
    name: "About",
    props: {  // 声明接受数据
      msg: String
    }
  }
</script>
<style scoped>
</style>

6.Home.vue

<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="nav nav-tabs">
        <li><router-link to="/home/news">News</router-link></li>
        <li><router-link to="message">Message</router-link></li>
      </ul>
      <!-- 根据路由链接显示路由组件 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>
<style scoped>
</style>

7.News.vue

<template>
  <div>
    <ul>
      <li v-for="(news, index) in newsArr" :key="index">{{news}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "News",
    data () {
      return {
        newsArr: ['news01','news02','news03','news04']
      }
    }
  }
</script>
<style scoped>
</style>

8.Message.vue

<template>
	<!-- 一个组件只能有一个根标签 -->
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">
      <!-- 这里to绑定表达式,链接是动态的;不能用相对路径,不然连续点链接时会出错 -->
        <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
        <button @click="pushShow(message.id)">push查看</button>
        <button @click="replaceShow(message.id)">replace查看</button>
      </li>
    </ul>
    <hr>
    <button @click="$router.back()">回退</button>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: "Message",
    data() {
      return {
        messages: []
      }
    },
    mounted() {
      // 模拟ajax异步从后台请求数据
      setTimeout(() => {
        const messages = [
          {
            id: 1,
            title: 'message01'
          },
          {
            id: 2,
            title: 'message02'
          },
          {
            id: 3,
            title: 'message03'
          },
        ]
        this.messages = messages
      }, 1000)
    },
    methods: {
      pushShow(id) {
        this.$router.push(`/home/message/detail/${id}`)
      },
      replaceShow(id) {
        this.$router.replace(`/home/message/detail/${id}`)
      }
    }
  }
</script>
<style scoped>
</style>

9.MessageDetail.vue

<template>
  <div>
    <ul>
      <li>id: {{$route.params.id}}</li>
      <li>title: {{detail.title}}</li>
      <li>content: {{detail.content}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "MessageDetail",
    data() {
      return {
        detail: {},
      }
    },
    mounted() {  // 改变当前路由组件参数数据时, 不会重新创建组件对象, mounted不会重新执行
      // setTimeout含义是定时器，到达一定的时间触发一次，在代码的执行时间上加1s
      // 但是setInterval含义是计时器，到达一定时间触发一次，并且会持续触发
      setTimeout(() => {
        const messageDetails = [
          {
            id: 1,
            title: 'message01',
            content: 'message01 content...'
          },
          {
            id: 2,
            title: 'message02',
            content: 'message02 content...'
          },
          {
            id: 3,
            title: 'message03',
            content: 'message03 content...'
          },
        ]
        this.messageDetails = messageDetails    //初始化数据，声明全局messageDetails
        const id = this.$route.params.id * 1  // id有可能为文本，故乘以1
        this.detail = messageDetails.find(detail => detail.id === id)
      }, 1000)
    },
    watch: {
      $route: function(value) {   // 改变当前路由组件参数数据时自动调用
        const id = value.params.id * 1
        this.detail = this.messageDetails.find(detail => detail.id === id)
      }
    }
  }
</script>
<style scoped>
</style>

总结

1.路由组件跳转

路由跳转与页面跳转相似，页面跳转是从一个页面跳到另一个页面，但路由跳转是从一个路由组件跳到另一个路由组件，类似tab页切换和导航栏效果。

页面跳转方式：

a链接 -- html
window.location.href -- js

路由组件跳转方式：

router-link -- html,等同于 $router.push, replace默认为false
router-link replace -- 当添加replace=true时等同于$router.replace
$router.push -- 在 history 栈中添加新记录
$router.replace -- 替换掉当前的 history 记录
$router.back() -- 回退

都是在 router-view 标签定义的地方显示url指向的路由组件

router.push(location)

这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。

router.replace(location)

这个方法不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录,点击返回按钮也不会回到之前的URL页面.

2.路由组件跳转时传递数据

声明式:

router-link :to="..." path上传递参数

params: /home/message/detail/${message.id}

query: '/home/message/detail?id='+message.id

router-view :abc="data" 属性携带参数

类似与同props进行组件通信,跳转的下一路由组件需声明接受属性props

编程式:

router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串
router.push('/home')	// 添加新记录
//push方法也可以传replace
this.$router.push({path: '/home', replace: true})	// 替换当前记录
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

params与query传参区别

query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变
路由配置：

query: {path: '/home', name: Home, component: Home}

params: {path: '/home/:site/:bu', name: Home, component: Home}
获取路由参数

	created () {
	let self = this
	self.getParams()
	},
	watch () {
	'$route': 'getParams'
	},
	methods: {
	  getParams () {
	  let site = this.$route.query.site
	  let bu = this.$route.query.bu
	  // 如果是params 传参，那就是this.$route.params.site
	  上面就可以获取到传递的参数了
	 }
	}

说明: 路由传递参数和传统传递参数是一样的，命名路由类似表单提交而查询就是url传递.

命名路由搭配params，刷新页面参数会丢失
传递参数搭配query，刷新页面数据不会丢失
接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值
$route为当前router跳转对象，携带数据。对象可以获取name、path、query、params等
$router为VueRouter实例，调用相关router方法来进行路由跳转