Vue-day-05（路由概念与原理，Vue-router，路由嵌套，动态路由））

1 路由的基本概念与原理

1.1路由:
前端路由
后端路由

介绍

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。

那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由
1). 后端路由是由服务器端进行实现，并完成资源的分发（url与资源/数据的对应关系）
2). 前端路由是依靠hash值(锚点链接)的变化进行实现（锚点与组件之间的关系）

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由

前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系

前端路由主要做的事情就是监听事件并分发执行事件处理函数

1.2后端路由

介绍：

image.png

1.3SPA

总结：

image.png

后端渲染界面，只要有一处修改，就需要刷新整个界面，存在性能问题
Ajax可以局部刷新，但是不支持前进后退
spa可以局部刷新，也支持前进后退

1.4 前端路由

image.png

1.5 路由总结

路由：表示一种对应关系，某些事物的一一对应的关系

后端路由：url与后端资源的一一对应的关系

前端路由：用户事件与事件处理函数一一对应的关系

1.6 实现简易前端路由

介绍
- 前端路由是基于hash值的变化进行实现的
  - 这里的hash值指的是url的hash值，也就是界面的锚点
- 比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换
- 核心实现依靠一个事件，即监听hash值变化的事件

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

案例：
核心思路：

在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容

在页面中有四个超链接，如下：

当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件

在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示：

    <!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>
        <!-- 导入 vue 文件 -->
        <script src="./lib/vue_2.5.22.js"></script>
    </head>
    <body>
        <!-- 被 vue 实例控制的 div 区域 -->
        <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a> 
        <a href="#/keji">科技</a> 
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
        <!-- 可以把 component 标签当做是【组件的占位符】 -->
        <component :is="comName"></component>
        </div>

        <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
            template: '<h1>主页信息</h1>'
        }

        // 科技组件
        const keji = {
            template: '<h1>科技信息</h1>'
        }

        // 财经组件
        const caijing = {
            template: '<h1>财经信息</h1>'
        }

        // 娱乐组件
        const yule = {
            template: '<h1>娱乐信息</h1>'
        }
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {
            comName: 'zhuye'
            },
            // 注册私有组件
            components: {
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
            case '/zhuye':
                vm.comName = 'zhuye'
            break
            case '/keji':
                vm.comName = 'keji'
            break
            case '/caijing':
                vm.comName = 'caijing'
            break
            case '/yule':
                vm.comName = 'yule'
            break
            }
        }
        </script>
    </body>
    </html>

2 vue-router的基本使用

2.1 基本使用

介绍
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
官网：https://router.vuejs.org/zh/

Vue Router的特性：

支持H5历史模式或者hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

....

基本使用步骤:
1.导入js文件
2.添加路由链接
3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
4.定义路由组件
5.配置路由规则并创建路由实例
6.将路由挂载到Vue实例中

1.导入js文件

image.png

2.添加路由链接

image.png

3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

image.png

router-view：路由-视图，显示用户点击的路由链接对应的组件

视图：组件可以显示出具体内容，可以理解为视图

例如：用户点击User路由链接，就会将User组件显示到这里

4.定义路由组件

image.png

5.创建路由实例，并配置路由规则

image.png

6.将路由挂载到Vue实例中

image.png

router是：router:router的简写

如果VueRouter的实例名是xxx，那挂载时，就需要写：router:xxx

Vue实例化时，参数el，data，methods，router都是固定的

代码：

<!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>
    <!--1. 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!--2. 添加路由链接：to渲染成href。to的值渲染成#hash值（锚点）-->
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link><!--<a href="#/user"> User</a>-->
      <router-link to="/register">Register</router-link>

      <!-- 3.路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
     //4.定义路由组件
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }
    //5. 配置路由规则，并创建路由实例
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        //6.挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

2.2 路由重定向

介绍：

image.png

rediret：重定向

普通的路由是定义path和component，访问url显示对应组件

重定向路由是定义path和redirect，访问url跳转到另一个url

代码：

//将上一个案例的路由规则增加一个重定向：
// 创建路由实例对象
const router = new VueRouter({
    // 所有的路由规则
    routes: [
        { path: '/', redirect: '/user'},//增加这一行代码，如果访问跟路径/，则重定向到/user
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
})

效果：

再访问：03.路由重定向.html
会跳转：03.路由重定向.html#/user

3 vue-router嵌套路由

通过路由嵌套，可以处理复杂的界面

嵌套路由功能分析：如下图：点击Register之后发现Register组件中嵌套了另一块内容

步骤：
1. 父路由组件模板

image.png

2 子级路由模板

image.png

因为子级模板是哎register组件内显示的，所以应该定义在register组件的template中

在template添加路由连接，子url是/register开头

在template添加router-view，给子组件占位

3 路由嵌套配置

image.png

作为register的子组件，那么就需要在register的children属性中定义路由规则
代码：

<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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

总结：

关于router-view和router-link的书写位置：

路由规则在哪定义的，router-view和router-link就写在谁的模板中

Register和User定义在vm中，那么他们的router-view和router-link就定义在app中

app这个div就可以理解为vm的模板

Register和User可以理解为vm的子组件

Tab1和Tab2定义在Register中，那么他们的router-view和router-link就定义Register中的模板中

路由规则在哪定义的，决定了自己的父组件是谁，那么子组件的router-view和router-link就定义在父组件的模板中

分析图：

image.png

4 vue-router动态路由匹配

4.1 动态路由匹配

需求：点击不同的用户连接，显示对应的用户信息

定义如下路由链接和路由规则，是否可行？

image.png

动态路由匹配介绍:

image.png

匹配规则定义时，动态路由语法为：参数名，以冒号开头，就代表是动态匹配

路由组件定义时，获取路由参数为：{{$route.params.参数名}}

$route.params.是固定写法

Vue实例的属性，都是 $开头，比如$ el

// 创建 vm 实例对象
const vm = new Vue({
    // 指定控制的区域
    el: '#app',
    data: {},
    // 挂载路由实例对象
    // router: router
    router
})

创建Vue实例时，传递的参数有：el,data,router

那么vm有了 $el，$ data，$router属性

但是获取动态参数，是{{$route.params.参数名}}

代码：

<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>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

4.2 路由组件传递参数

介绍:

image.png

就是在组件中想要获取路由参数，需要通过{{$route.params.id}}来获取，比较麻烦

4.2.1 props的值为布尔类型

image.png

路由定义规则中：props:true，代表给动态参数id，开启props传参（其实就是通过props方式传递参数）

路由组件定义中：通过props接收参数

这样就不用通过{{$route.params.id}}获取

其实这个跟之前的组件通过属性传递数据是类似的：

<User id='1'></User>
这个1就会传递给User组件的props属性id

代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
      <User id='1'></User>
    </div>

    <script>
      const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: true },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

内部原理：

image.png

4.2.2 props的值为对象类型

介绍：

image.png

uname的lisi传递给User组件中props的uname，age的12传递给User组件中props的age

这时的id就无法获取了，所以id在这种方式中就废了

只有props为true时，才会将:id作为参数传递给User

代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        //这个id其实是拿不到值的
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

4.2.3 props的值为函数类型

介绍：

image.png

props指定了一个箭头函数：相当于如下代码

 ``` props:function (route){
      return {uname:'zs',age:20,id:route.params.id}
  }```

箭头函数返回了一个对象，对象中的数据，就是要传递的数据

uname和age是定死的值

router是箭头函数的形参，系统在调用时会将$route传递进去

id是通过route.params.id动态获取到id参数的值
代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

5. vue-router命名路由

介绍：

image.png

这样就不用在定义路由链接得时候，在to中写具体的path了

有时候path比较复杂，用名字代替会更好一点

如果path中有参数，那么在to中就通过params来确定参数的值

相当于：
<router-link to="/user/123">User2</router-link>
代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <!--原来写法，可能你会更喜欢原来的写法，但是如果path比较复杂时，用命名路由会更好-->
      <router-link to="/user/3">User2</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

6. vue-router编程式导航

6.1 页面导航的两种方式

image.png

声明式导航，其实就是html实现导航

编程时导航，其实就是js代码实现导航（location.href就是js代码）

页面导航，其实就是页面跳转

6.2 编程导航

基本用法

image.png

push跳转锚点

go前进后退，参数n一个数字，代表前进后退几个界面

n，代表前进n个界面

-n，代表后退n个界面

代码：

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')//跳转到注册页面（锚点），可以看下效果
          }
        },
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)//-1：后退1个界面
          }
        }
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>

6.3 push参数 (了解)

介绍

image.png

跟route-link是一样的作用，都是实现页面跳转

所以push中可以直接写path路径（路由），也可以写命名路由

相当于：

<!--前两个对应这个  -->
<router-link to="/home">User1</router-link>
<!--#push中的name应该也不带斜杠才对-->
<router-link :to="{ name: 'user', params: {userId: 123} }">User123</router-link>
<router-link to="/register?uname=lisi">Register</router-link>

最后编辑于：2021.03.24 10:03:45

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

Vue-day-05（路由概念与原理，Vue-router，路由嵌套，动态路由））

1 路由的基本概念与原理

1.2后端路由

1.3SPA

1.4 前端路由

1.5 路由总结

1.6 实现简易前端路由

2 vue-router的基本使用

2.1 基本使用

2.2 路由重定向

3 vue-router嵌套路由

4 vue-router动态路由匹配

4.1 动态路由匹配

4.2 路由组件传递参数

4.2.1 props的值为布尔类型

4.2.2 props的值为对象类型

4.2.3 props的值为函数类型

5. vue-router命名路由

6. vue-router编程式导航

6.1 页面导航的两种方式

6.2 编程导航

6.3 push参数 (了解)

推荐阅读更多精彩内容