松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › router的使用

router的使用

迦娜王
2年前Vue2.x从零开始
818 0 1

路由的使用

之前我们的vue应用都是只有一个视图,但是一般的应用不止一个视图。于是乎就有了路由,路由可以很方便的帮我们切换视图,而且在视图切换过程没有浏览器刷新,体验比较好。

基本使用

我们通过一个简单的例子来演示,在写代码之前,我们需要安装下路由组件,路由组件由vue官方提供,在my-project目录下执行命令yarn add vue-router 等待完成。

  • 修改App.vue
<template>
    <router-view/>
</template>

<script>
    export default {
    }
</script
  • 在src文件夹下新建一个views文件夹
  • 在views文件夹下新建test1.vue文件和test2.vue

.vue后缀的文件就是vue的组件,视图本质上也是组件,只是人为划分的。

test1.vue

<template>
  <div>test1</div>
</template>

<script>
   export default {
   }
</script>

test2.vue

<template>
  <div>test2</div>
</template>

<script>
   export default {
   }
</script>
  • 在src文件夹下新建一个router.js文件

现在我们来使用router实现test1和test2的切换。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('@/App'),
            children:[
                {
                    path: '/view1',
                    name: 'view1',
                    component: () => import('@/views/test1'),
                },
                {
                    path: '/view2',
                    name: 'view2',
                    component: () => import('@/views/test2'),
                }
            ]
        }
    ]
})

刷新页面,我们发现一片空白,那是因为默认路由到/路径,现在我们在浏览器地址栏输入http://localhost:8080/#/view1,我们发现页面输出了test1,如果把view1改成view2,输出test2,这就是刚才我们写的那2个视图组件。 如果你希望一进入页面就跳转到view1,可以加个重定向:

component: () => import('@/App'),
redirect:'/view1',//重定向到某个路径

由于我们的代码越来越长了,后面的贴出的代码会使用局部代码。

通过代码和a标签来切换路由

刚才我们只是通过浏览器的地址栏来切换视图,但是实际开发往往需要使用代码来切换。

  • 通过代码切换

我们可以通过调用代码router.push方法来切换。我们可以在点击事件内这样写:

this.$router.push('/view2') 

或者

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

使用代码切换的场景还是非常多,比如登录。有时候我们无法直接获取到this指针,比如在echarts的一些方法内无法直接获取vue实例,那么难道就没办法了吗,可以试试直接在当前组件内引入vue,import Vue from 'vue',然后通过Vue.$router.push()一样能调用,这是因为我们在main.js中初始化vue实例的时候把路由组件塞进了vue实例的根节点。

  • 通过超链接跳转

利用超链接也能实现切换。注意:有时候会出现点击无效。

通过query参数传递

有了路由切换,那肯定少不了视图之间的参数传递。我们先来介绍如何使用query来传参,query参数的形式:param1=value&param2=value。这种参数传递的方式,不需要修改任何路由,直接通过以下方式带上即可:

  • url后面带上参数,例:http://127.0.0.1/#/?id=1
  • 编码方式传递,就是在调用this.$router.push({path:'/view2'})的时候带上,代码变成:this.$router.push({path:'/view2',query:{id:1,age:10,name:'张珊'}})

参数传递过去之后,我们还要接收,由于我们在vue框架中开发,我们应该使用vue的方式来获取参数,当然原生js也能获取,但是不太优雅。获取方式:this.$route.query.参数名。在你需要获取参数的组件中调用就可以了。

通过path传输传递

query传递参数其实能满足大部分需求,但是为了url美观一点或者其他原因,我们希望把一些参数嵌入url,那么我们可以使用path。path传输需要预先在路由中定义占位符号。在router.js中,我们修改/view1,让他支持从path传递id这个参数:

...
{
    path: '/view1/:id',
    name: 'view1',
    component: () => import('@/views/test1'),
},
...

传递参数的方式依然有两种:

  • 在url中拼接,原则上我们是知道占位符定义的位置的,那么我们还是可以通过把参数拼接 到url中,只是相比query,参数有时候要拼接到url中间位置。
  • 编码方式传递,和query有点不同:this.$router.push({name:'view1',params:{id:1}});也可以这样this.$router.push({path:'/view/1'}),其实也是字符串拼接的方式。

取值方式:
this.$route.params.id

meta的使用

有时候,我们想让路由带更多的信息,比如权限,菜单图标。这个时候我们就需要使用meta了。meta就是router专门考虑到这个需求设计的。
修改路由为:

···
{
    path: '/view1',
    name: 'view1',
    component: () => import('@/views/test1'),
    meta:{
        access:true,
        icon:'menu'
    }
},
···

现在我们在test1.vue的mounted钩子里面读取:

<template>
    <div>test1</div>
</template>

<script>
    export default {
        mounted(){
             //在控制台输出
           console.log( this.$route.meta)
        }
    }
</script>

一般输出的就是当前路由的meta数据。

路由守卫(拦截)

路由守卫这个功能,这个很重要,像未登录跳转,权限拦截跳转都会用到。我们在src下新建一个文件router.config.js:

import router from './router'

// 路由前置拦截器
router.beforeEach((to, from, next) => {
  next()//调用后放行。
})
// 路由后置拦截器
router.afterEach((to, from) => {
})

前置拦截就是进入目标路由之前做拦截处理,后置就是进入目标路由后做拦截处理。具体处理逻辑我们可以自己实现。参数方面,to,from都是路由对象,在前置拦截里面,to是目标路由,from是当前路由;在后置拦截里面,to是当前路由,from是上一次的路由。next是一个方法,调用就可以放行。
然后我们在main.js中引入这个文件import './router.config'

动态加载路由

这里介绍的动态路由,是指这个路由不是事先配置好的,是通过代码动态添加进去的,一般可以用在后台管理菜单。这里不做介绍了,我们将在案例实践中来做实验。

小结

路由还有很多功能,我这里介绍了都是常用的功能,如果想更加深入挖掘,可到官网查看手册。

1
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
以Haar分类器为样例了解分类器
上一篇
Vue CLI 3.0 构建时插入版本等信息
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 路由的使用
  • 基本使用
  • 通过代码和a标签来切换路由
  • 通过query参数传递
  • 通过path传输传递
  • meta的使用
  • 路由守卫(拦截)
  • 动态加载路由
  • 小结
1
相关文章
watch属性的使用
computed属性的使用
vuex的简单使用
filters的使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
233 喜欢
  • 1
  • 0
  • Top