zoukankan      html  css  js  c++  java
  • vue2.0 vue-router

    一、SPA中路由的简单实现

    main.js

    import Vue from 'vue'
    import App from './App'
    import VueRouter from 'vue-router'
    import Page01 from './components/page01'
    import Page02 from './components/page02'
    
    Vue.use(VueRouter)//全局安装路由功能
    //定义路径
    const routes = [
      { path: '/', component: Page01 },
      { path: '/02', component: Page02 },
    ]
    //创建路由对象
    const router = new VueRouter({
      routes
    })
    
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      router
    })
    

    App.vue

    <template>
      <div id="app">
        <router-link to="/">01</router-link>
        <router-link to="/02">02</router-link>
        <br/>
        <router-view></router-view>
      </div>
    </template>
    

    page01.vue

    <template>
      <div>
        <h1>page01</h1>
      </div>
    </template>
    

    page02.vue

    <template>
      <div>
        <h1>page02</h1>
      </div>
    </template>
    

    实现步骤:

    1.npm安装vue-router
    2.Vue.use(VueRouter)全局安装路由功能
    3.定义路径数组routes并创建路由对象router
    4.将路由注入到Vue对象中
    5.在根组件中使用<router-link>定义跳转路径
    6.在根组件中使用<router-view>来渲染组件
    7.创建子组件
    

    二、路由的跳转

    router-link

    router-link 标签用于页面的跳转

    <router-link to="/page01">page01</router-link>
    

    点击这个router-link标签router-view就会渲染路径为/page01的页面。
    注意:router-link默认是一个a标签的形式,如果需要显示不同的样子,可以在router-link标签中写入不同标签元素,如下显示为button按钮。

    <router-link to="/04">
        <button>to04</button>
    </router-link>
    

    router.push

    下面我们通过JS代码控制路由的界面渲染,官方是写法如下:

    // 字符串
    router.push('home')
    // 对象
    router.push({ path: 'home' })
    // 命名的路由
    router.push({ name: 'user', params: { userId: 123 }})
    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})
    

    那么问题来了,如果是全局注册的路由Vue.use(VueRouter),应该怎么写呢?

    // 字符串
    this.$router.push('home')
    // 对象
    this.$router.push({ path: 'home' })
    // 命名的路由
    this.$router.push({ name: 'user', params: { userId: 123 }})
    // 带查询参数,变成 /register?plan=private
    this.$router.push({ path: 'register', query: { plan: 'private' }})
    

    push方法其实和<router-link :to="...">是等同的。
    注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

    router.replace

    push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。用法如下
    template

    <router-link to="/05" replace>05</router-link>
    

    script

    this.$router.replace({ path: '/05' })
    

    router.go

    go方法用于控制history记录的前进和后退

    // 在浏览器记录中前进一步,等同于 history.forward()
    this.$router.go(1)
    // 后退一步记录,等同于 history.back()
    this.$router.go(-1)
    // 前进 3 步记录router.go(3)
    // 如果 history 记录不够用,那就默默地失败呗
    this.$router.go(-100)
    this.$router.go(100)
    

    其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数

    三、路由的传参方式

    在路由跳转的过程中会传递一个object,我们可以通过watch方法查看路由信息对象。

    watch: {
      '$route' (to, from) {
          console.log(to);
          console.log(from);
      },
    },
    

    console中看到的路由信息对象

    {
        ...
        params: { id: '123' },
        query: { name: 'jack' },
        ...
    }
    

    这两个参数会在页面跳转后写在路径中,路径相当于/page/123?name=jack

    1. params

    params传递的数据可用于匹配动态路由字段。如params的数据为 params: { abc: 'hello', txt: 'world' } 而动态路由路径为 path: '/05/:txt 那么最终的路径就会是 /05/world所以,动态路由其实就是一种params的传递方式。

    注意:由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效!需要用name来指定页面。之后动态路由会从params中找到动态路由同名的数据。

    传递数据

    在路由配置文件中定义参数

    export default [
        ...
        { name: 'Page05', path: '/05/:txt', component: Page05 },
    ]
    

    下面有两种传递params的方式

    1. 通过path传递

    路径后面的/:txt就是我们要传递的参数。

    this.$router.push({ path: '/05/441'})
    

    此时路由跳转的路径

    http://localhost:8080/#/05/441
    

    此时我们看到查看路由信息对象:

    {
        ...
        params: {
            txt: '441'
        }
        ...
    }
    

    2. 通过params传递

    this.$router.replace({ 
        name: 'Page05', 
        params: { abc: 'hello', txt: 'world' }, 
        query: { name: 'query', type: 'object' }
    })
    

    通过name获取页面,传递params和query。
    得到的URL为

    http://localhost:8080/#/05/world?name=query&type=object
    

    而获取到的参数为

    {
        ...
        params: {
            abc: "hello",
            txt: "world"
        }
        ...
    }
    

    获取数据

    template

    <h2> {{ $route.params.txt }} </h2>
    

    script

    console.log(this.$route.params.txt)
    

    3. query

    query传递数据的方式就是URL常见的查询参数,如/foo?user=1&name=2&age=3。很好理解,下面就简单写一下用法以及结果

    传递数据

    template

    <router-link :to="{ path: '/05', query: { name: 'query', type: 'object' }}" replace>05</router-link>
    

    script

    this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})
    

    路径结果

    http://localhost:8080/#/05?name=query&type=object
    

    路由信息对象

    {
        ...
        query: {
            name: "query",
            type: "object"
        }
        ...
    }
    

    获取数据

    获取数据和params是一样的。
    template

    <h2> {{ $route.query.name }} </h2>
    

    script

    console.log(this.$route.query.type)
    

    .

  • 相关阅读:
    RecyclerView 数据刷新的几种方式 局部刷新 notify MD
    【图片】批量获取几万张图片
    RV BaseRecyclerViewAdapterHelper 总结 MD
    RecyclerView.ItemDecoration 间隔线
    Kotlin【简介】Android开发 配置 扩展
    Kotlin 特性 语法糖 优势 扩展 高阶 MD
    一个十分简洁实用的MD风格的UI主框架
    折叠伸缩工具栏 CollapsingToolbarLayout
    FloatingActionButton FAB 悬浮按钮
    Glide Picasso Fresco UIL 图片框架 缓存 MD
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7749357.html
Copyright © 2011-2022 走看看