星星博客 »  > 

vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转;
先说一下两种模式
默认是hash模式 ,也就是会出现如下的URL:在这里插入图片描述
,URL中带有#号,我们可以用如下代码修改成history模式:

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

这样子URL中的#号就被去除了。
  实际上存在三种模式:
  Hash: 使用URL的hash值来作为路由。支持所有浏览器。
  History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
  Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。
  二、两种模式的区别
1、hash模式
  hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度上说明了原理。

更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。
  编程式导航
  this.$router.push
跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面

this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数

一,组件中使用:

在这里插入图片描述

因为router在入口文件中被挂载到vue上了,所以其他vue组件(实际上都是vue的实例),就需要通过this.$router来调用。

二,模块中使用
在这里插入图片描述
router-linke

router-link

// 将原本用a标签跳转的功能用router-link实现
// to是指要跳转到的目录,tag是这个点击跳转标签的样式,可以是li的样式等等

<router-link to="xxx" tag=" ">
//  将原本用a标签跳转的功能用router-link实现
//  to是指要跳转到的目录,tag是这个点击跳转标签的样式,可以是li的样式等等

在这里插入图片描述

router-link-exact-active: 路由完全匹配,当前选中
router-link-active: 路由不完全匹配
to: 表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

vue路由传参和接受
第一种:使用router的name属性也就是params来传递参数
这个方法有一个bug就是当你传参过去的时候,再次刷新页面时参数就会丢失。解决方法下边会说到。

step:1,首先需要在router/index.js里边配置每个页面的路径,name属性,看例子:

import Vue from 'vue'
import Router from 'vue-router'
const _import = require('./_import_' + process.env.NODE_ENV)
Vue.use(Router)
export const constantRouterMap = [{
        path: '/login/:userId/:id',
        name:'Message',    //就是要在路由配置里边配置这个属性,用来知道你要跳转到那个页面的名字
    /***
     * 如果想做到页面刷新,参数不丢失,就必须在path后面加上这个参数
     * 但是这样做的话就会导致参数显示在url的后面,(在这一点上)跟query没什么区别了。
    *  多个参数也可以一直往后边追加
     */
        component: _import('login/index'),
        hidden: true
    },
    {
        path: '',
        component: Layout,
        redirect: 'dashboard',
        icon: 'dashboard',
        hidden: true,
        noDropDown: true,
        children: [{
            path: 'dashboard',
            name: '首页',
            component: _import('main/index'),
            meta: {
                title: 'dashboard',
                icon: 'dashboard',
                noCache: true
            }
        }]
    }
]

export default new Router({
    routes: constantRouterMap
})

step:2,在传值页面的写法:

//用这种方法传参,必须这么些,不能写path,否则你在取参数的时候this.$router.params.userId就是undefined.这是因为,params只能用name来引入路由,
this.$router.push({
    name:"'Message'",//这个name就是你刚刚配置在router里边的name
    params:{
          userId:"10011"
    }
})

step:3,在取值页面的写法:
切记,再取参数的时候一定是this.route 不是 this.router,切记。

this.$route.params.userId

第二种:使用query来传递参数
step:1,在传值页面的写法:

this.$router.push({
    path:"/login",//这个path就是你在router/index.js里边配置的路径
    query:{
          userId:"10011"
    }
})

step:2,在取值页面的写法

第一种:
this.$router.currentRoute.query.userId
第二种:
这种方法再取参数的时候一定是this.$route   不是   this.$router,切记。
this.$route.query.userId

第三种:使用vue里的标签来传递参数
step:1,在传值页面的写法:

 <router-link target="_blank"
                             :to="{path:'/login',query:{userId: "33333"}}">
         </router-link>

step:2,在取值页面的写法:同第二种。
其实,router-link也可以使用name的方法传参

同样,这种方法也需要在router/index.js里边配置每个页面的路径,name属性
name:‘Message’, //就是要在路由配置里边配置这个属性,用来知道你要跳转到那个页面的名字

<router-link :to="{name:''Message'',params:{userId:'1234'}}">Hi页面1</router-link>

取参方法:

this.$route.params.userId

相关文章