VueJs(10)---vue-router（动态路由，嵌套式路由，编程式路由）

时间  2019-11-08
标签 vuejs vue router 动态 路由 嵌套 编程 栏目 系统网络 繁體版
原文   原文链接

vue-router（动态路由，嵌套式路由，编程式路由）

     

       本文是基于官网学习，官网具体学习目录：vue-routerhtml

      1、安装

          基于vue-cli脚手架安装仍是蛮简单的：在文件当前目录下运行：vue

npm install vue-router

     若是在一个模块化工程中使用它，必需要经过 Vue.use() 明确地安装路由功能：vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

         脚手架安装教程：  脚手架安装教程 vue-cli

        其余类型安装详见官网：安装npm

 

   2、单页面应用

   官网介绍的已经很全面。编程

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 经过传入 `to` 属性指定连接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>
    // 0. 若是使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 能够从其余文件 import 进来
    const Foo = {
        template: '<div>foo</div>'
    }
    const Bar = {
        template: '<div>bar</div>'
    }

    // 2. 定义路由
    // 每一个路由应该映射一个组件。 其中"component" 能够是
    // 经过 Vue.extend() 建立的组件构造器，
    // 或者，只是一个组件配置对象。
    // 咱们晚点再讨论嵌套路由。
    const routes = [{
        path: '/foo',
        component: Foo
    }, {
        path: '/bar',
        component: Bar
    }]

    // 3. 建立 router 实例，而后传 `routes` 配置
    // 你还能够传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // （缩写）至关于 routes: routes
    })

    // 4. 建立和挂载根实例。
    // 记得要经过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

    // 如今，应用已经启动了！
</script>

  <!-- 要注意，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active -->
<style>
    .router-link-active {
  color: red;
 }
</style>

效果：segmentfault

  这个案例，就是不一样路径显示不一样组件。浏览器

 

     3、动态路由匹配

    咱们常常须要把某种模式匹配到的全部路由，全都映射到同个组件。好比/user/name、/user/age、/user/haha都要映射到user组件，怎么作呢？app

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/bar">/user/bar</router-link>
    </p>
    <router-view></router-view>
</div>

<script>
    //一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，
    //参数值会被设置到 this.$route.params，能够在每一个组件内使用。因而，咱们能够更新 User 的模板
    //输出当前用户的 ID
    const User = {
        template: `<div>User {{ $route.params.id }}</div>`
    }
     // 动态路径参数 以冒号开头
     //如今呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
    const router = new VueRouter({
        routes: [{
            path: '/user/:id',
            component: User
        }]
    })

    const app = new Vue({
        router
    }).$mount('#app')
</script>

<style>
    .router-link-active {
        color: red;
    }
</style>

效果： 模块化

  你能够在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。例如：

  模式 匹配路径 $route.params
  /user/:username /user/evan { username: 'evan' }
  /user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: 123 }

 

 

 

 

      4、嵌套路由

    嵌套路由是个常见的需求，假设用户可以经过路径/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

 实现嵌套路由有两个要点：

  • 在组件内部使用<router-view>标签
  • VueRouter 的参数中使用 children 配置
<div id="app">
  <router-view></router-view>
</div>

    这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。一样地，一个被渲染组件一样能够包含本身的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

       要在嵌套的出口中渲染组件，须要在 VueRouter 的参数中使用 children 配置

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

     要注意，以 / 开头的嵌套路径会被看成根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

    此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是由于没有匹配到合适的子路由。若是你想要渲染点什么，能够提供一个 空的 子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其余子路由
      ]
    }
  ]
})

 综合小案例：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/foo/profile">/user/foo/profile</router-link>
        <router-link to="/user/foo/posts">/user/foo/posts</router-link>
    </p>
    <router-view></router-view>
</div>
<script> const User = {
        template: `
      <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
      </div> `
    }
    const UserHome = { template: '<div>Home</div>' }     
    const UserProfile = {   template: '<div>Profile</div>'  }    
    const UserPosts = {   template: '<div>Posts</div>'  }
       
    const router = new VueRouter({
        routes: [{
            path: '/user/:id',
            component: User,
            children: [{
                 // /user/:id/匹配到UserHome组件，若是你是/user/:id/home是匹配不到任何组件的，由于children里没有home路径
 path: '',
                    component: UserHome
                },

                { // /user/:id/profile匹配到UserProfile组件
 path: 'profile',
                    component: UserProfile
                },

                { // /user/:id/posts匹配到UserPosts组件
 path: 'posts',
                    component: UserPosts
                }
            ]
        }]
    })
    const app = new Vue({
        router
    }).$mount('#app')
</Script>

效果：

 

5、编程式路由

   一、router.push

       上面几种路由都是直接在页面点击进行跳转，但在咱们实际开发过程当中，有不少按钮在执行跳转以前，还会执行一系列方法，这时可使用 this.$router.push(location) 来修改 url，完成跳转

 想要导航到不一样的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，因此，当用户点击浏览器后退按钮时，则回到以前的 URL。

 当你点击 <router-link> 时，这个方法会在内部调用，因此说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式 编程式
<router-link :to="..."> router.push(...)

 

 

 

该方法的参数能够是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

 

注意：若是提供了 path，params 会被忽略，上述例子中的 query 并不属于这种状况。取而代之的是下面例子的作法，你须要提供路由的 name 或手写完整的带有参数的 path

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

  一样的规则也适用于 router-link 组件的 to 属性。

  2.router.replace

  跟 router.push 很像，惟一的不一样就是，它不会向 history 添加新记录，而是跟它的方法名同样 —— 替换掉当前的 history 记录。（下面会具体说明）

声明式 编程式
<router-link :to="..." replace> router.replace(...)

 

 

 

三、router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，相似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 若是 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

 

四、三个比较说明：

1.this.$router.push()：

      跳转到不一样的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。

2.this.$router.replace()

      一样是跳转到指定的url，可是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

     相对于当前页面向前或向后跳转多少个页面,相似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

四、在什么状况用push，或者在上面状况用replace，我的理解：

     通常状况下，要作前进后退的浏览记录管理的，基本上都是用router.push()，可是也是有一些特殊状况须要用到router.replace()。好比，有一个受权页，用户在按流程操做时，某一步须要受权，是直接跳到受权页，受权页提交受权请求，直到成功受权后，跳到流程中的下一步操做的地址。此处，受权请求的那页面应该用replace去替换掉自身的访问记录，防止用户跳到下一步流程后按后退键回退到受权页，而致使重复受权，简单来说就是你跳过来了，就不让你后退又到上一个页面。

举例：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <button type="button" @click="fooClick">/user/foo</button>
    <button type="button" @click="profileClick">/user/foo/profile</button>
    <button type="button" @click="postsClick">/user/foo/posts</button>

    <router-view></router-view>
</div>
<script>
    //定义了三个组件
    const UserHome = {   template: '<div>Home</div>'  }  
    const UserProfile = {  template: '<div>Profile</div>'}  
    const UserPosts = {   template: '<div>Posts</div>'  }

    //匹配了三个路由  
    const router = new VueRouter({
        routes: [{
            path: '/user/foo',
            component: UserHome,
        }, {
            path: '/user/foo/profile',
            component: UserProfile,
        }, {
            path: '/user/foo/posts',
            component: UserPosts,
        }]
    })
    const app = new Vue({
        el: '#app',
        router,
        data: {
            foo: '/user/foo',
            profile: '/user/foo/profile',
            posts: '/user/foo/posts'
        },
        methods: {

            fooClick: function(event) {
                this.$router.push({
                    path: this.foo
                });
            },
            profileClick: function(event) {
                this.$router.push({
                    path: this.profile
                });
            },
            postsClick: function(event) {
                this.$router.push({
                    path: this.posts
                });
            }
        }
    })
</Script>

页面：

测试结果：当使用 this.$router.push，时，前进一步后退一步都会退到上一次进入的页面，而使用 this.$router.replace并不不会调到上一个页面。

 

想太多，作太少，中间的落差就是烦恼。想没有烦恼，要么别想，要么多作。中尉【19】

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程