• 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)
    

    .

  • 相关阅读:
    PHP学习笔记(三)
    简单的学习心得:网易云课堂Android开发第六章SQLite与ContentProvider 熊,我
    简单的学习心得:网易云课堂Android开发第三章自定义控件 熊,我
    简单的学习心得:网易云课堂Android开发第五章SharedPreferences与文件管理 熊,我
    简单的学习心得:网易云课堂Android开发第四章服务、广播与酷特性 熊,我
    本地Server发布外网Web应用(Oray实现)
    玩玩微信公众号Java版之准备
    C语言的第零次作业
    C语言博客作业02循环结构
    C语言博客作业03函数
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7749357.html
Copyright © 2020-2023  润新知