Vue学习笔记(4)-带参数路由，嵌套路由，编程式导航

时间 2020-05-13

原文原文链接

路由传参

明确使用场景：后期不少业务可能须要传递参数，如编辑时须要传递IDhtml
若是在路由配置中添加参数设置vue

{ name:'Product', // 添加路由的参数配置,参数的标识就是:
        // id这个名称你能够随意，它就至关于一个形参，它所影响不是你如何传递参数，而是后期如何获取参数
        path:'/product/:id', component:Product }

在调用路由的时候的格式vue-router

<!-- 这里传递不须要添加: -->
<router-link to="/product/1">水果</router-link>

获取路由参数编程

经过$route能够获取路由参数对象:this.$route数组
里面有一个params属性，就存储着当前路由参数，它是一个对象app

// 在mounted钩子函数中获取参数
mounted(){ console.log(this.$route) // 经过this.$route.params能够来获取当前的路由参数
    var id = this.$route.params.id if(id == 1){ this.type = '水果' }else if(id == 2){ this.type = '电器' }else if(id == 3){ this.type = '服装' } }

上面代码有一问题：没法去响应路由参数的变化，说得具体一点：mounted钩子函数中的代码没法响应路由参数的变化ide

1.mounted钩子函数能够响应路由的变化:由于路由变化，须要从新加载路由所对应的组件，若是加载组件，那么就会执行组件的完整的生命周期，因此mounted可以触发函数

2.可是mounted钩子函数没法响应同一个路由的参数变化。提醒一下，当使用路由参数时，例如从 /product/1 导航到 /product/2，原来的组件实例会被复用。由于两个路由都渲染同个组件，比起销毁再建立，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用ui

监听(响应)路由的变化this

监听方式
处理参数的方式

 watch: { // 监听路由的参数的变化
     // to是目标路由对象
     // from:源路由对象
     '$route'(to, from) { var id = to.params.id if (id == 1) { this.type = '水果' } else if (id == 2) { this.type = '电器' } else if (id == 3) { this.type = '服装' } } }

细节：

从一个路由跳转到/product的效果是mounted在起做用
从/product/1到/proudct/2,这是watch在起做用

嵌套路由

为何须要嵌套路由

实际生活中的应用界面，一般由多层嵌套的组件组合而成。一样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件
若是须要让一个组件内部的某个部分的内容进行动态改变，那么就须要添加嵌套路由
由于咱们但愿可以匹配的路由所对应的组件在某个组件内部的某个位置出现，而不是覆盖当前页面

如何添加嵌套路由的配置

经过children来设置
细节：不要在嵌套路由的path值中添加/,不然会破坏当前路由的层级

var router = new VueRouter({ // 3.经过routes来添加路由配置，每一个路由配置都是一个对象，里面有经常使用属性，如name,path,component,redirect
 routes: [ { name: 'Index', path: '/index', component: Index }, { name: 'Product', // 添加路由的参数配置,参数的标识就是:
            // id这个名称你能够随意，它就至关于一个形参，它所影响不是你如何传递参数，而是后期如何获取参数
            path: '/product/:id', component: Product, // 添加当前路由的嵌套路由，经过children来添加
            // children是一个数组，里面的每个值都是一个具体的路由配置对象
            // 细节：嵌套路由不要添加/，不然会形成路由层级的问题
 children:[ { name:'Shui', path:'shui', component:Shui }, { name:'Dian', path:'dian', component:Dian }, { name:'Fu', path:'fu', component:Fu } ] } ] })

如何使用嵌套路由：如何进行嵌套路由的跳转

var Product = Vue.component('product', { template: `<div>{{type}} <button>单击展现详细信息</button>
    // 设置嵌套路由对应组件的展现区域
    <router-view></router-view>
</div>`,
......

实现嵌套路由的跳转

之前是经过router-link来实现路由跳转--声明式导航-
如今咱们须要经过代码进行跳转--编程式导航
如何实现编程式导航：经过this.$router.push。

nav(){ if (this.id == 1) { // 使用编程式导航跳转到嵌套路由
        this.$router.push({name:'Shui'}) } else if (this.id == 2) { this.$router.push({name:'Dian'}) } else if (this.id == 3) { this.$router.push({name:'Fu'}) } }

案例完整代码

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Document</title>
  <script src="./lib/vue2.js"></script>
  <script src="./lib/vue-router.js"></script>
</head>

<body>
  <div id='app'>
    <router-link to="/index">首页</router-link>
    <router-link to="/product/1">水果</router-link>
    <router-link to="/product/2">电器</router-link>
    <router-link to="/product/3">服装</router-link>
    <h2>下面是路由所对应的组件的展现区域</h2>
    <router-view></router-view>
  </div>
  <script>
    // 添加组件
    var Index = Vue.component('index', { template: '<div>首页</div>' }) var Product = Vue.component('product', { template: `<div>{{type}} <button @click='nav'>单机展现详细信息</button>
      <router-view></router-view>
      </div>`,
 data() { return { type: "??", id: '' } }, methods: { nav() { if (this.id == 1) { // 使用编程式导航跳转到嵌套路由
            this.$router.push({ name: 'Shui', params: { username: 'jackandrose' } }) } else if (this.id == 2) { this.$router.push({ path: `/product/${this.id}/dian`
 }) } else if (this.id == 3) { this.$router.push({ name: 'Fu' }) } } }, watch: { // 监听路由的参数的变化
        // to是目标路由对象
        // from是源路由对象
        '$route'(to, from) { this.id = to.params.id if (this.id == 1) { this.type = '水果' } else if (this.id == 2) { this.type = '电器' } else if (this.id == 3) { this.type = '服装' } } }, // 在mounted钩子函数中获取参数
 mounted() { console.log(this.$route) // 经过this.$route.params能够来获取当前的路由参数
        this.id = this.$route.params.id if (this.id == 1) { this.type = '水果' } else if (this.id == 2) { this.type = '电器' } else if (this.id == 3) { this.type = '服装' } } }) var Shui = Vue.component('shui', { template: '<div>水果详细信息</div>', mounted() { console.log(this.$route) } }) var Dian = Vue.component('dian', { template: '<div>电器详细信息</div>' }) var Fu = Vue.component('fu', { template: '<div>服装详细信息</div>' }) // 经过new VueRouter构造函数来建立路由
    var router = new VueRouter({ // 经过routes来添加路由配置，每一个路由配置都是一个对象，里面有经常使用属性，name，path，component
 routes: [{ path: '/', // 实现重定向
 redirect: { name: 'Index' } }, { name: 'Index', path: '/index', component: Index }, { name: 'Product', // 添加路由的参数配置，参数的标识就是：
          // id这个名称你能够随意定义，它就至关于一个形参，她所影响不是你如何传递参数，而是后期如何获取参数
          path: '/product/:id', component: Product, // 添加当前路由的嵌套路由，经过children来添加
          // children是一个数组，里面的每个值都是一个具体的配置对象
          // 细节：嵌套路由不要添加/,不然会形成路由层级的问题
 children: [{ name: 'Shui', path: 'shui', component: Shui }, { name: 'Dian', path: 'dian', component: Dian }, { name: 'Fu', path: 'fu', component: Fu }, ] } ] }) var vm = new Vue({ el: '#app', // 挂载路由
 router, data: {} }) </script>
</body>

</html>

嵌套路由

回顾路由中出现的关键字

VueRouter：建立路由对象的构造函数

router：vm实例中挂载路由的属性

routes：配置路由的属性--数组

router-view：路由展现区域

router-link：超连接

$route：获取参数和对象

$router：实现编程式导航的对象，它有push方法能够实现编程式导航