路由的使用  (5步)

1.首先安装路由  npm install  vue-router
2.引入 vue-router

import VueRouter from 'vue-router'

3.使用router

Vue.use(VueRouter )

创建实例

const router = new VueRouter({

routers

(routers:routers) //注意属性必须是routers

})

const router = new VueRouter({

   routers:[
{
path:'/apple',
component:Apple
},
{
path:'/banbana',
component:Banana
}
]
})

在组件中使用

<view-router   to="{name:'apple'}">to apple</view-router>

<view-router  to="{name:'banana'}>to banana</view-router>

全局使用router

const app = new Vue({

router}).$mount('app')

2.我们可以访问它this.$router以及this.$route任何组件内部的当前路由:

路由参数 /apple/:color

获取参数

this.$router.params

传给子路由

props: route => ({ id: route.query.id })

子路由的获取直接props:['id']

3.动态路由匹配

/user/:id

匹配  /user/foo    /user/bar

因为会匹配到相同的组件,所以不会重新调用生命钩子,如果监听变化的话

捕获所有的404未找到路线

{path:'*'

component:404组件

}

路由的匹配优先级是,路由定义的越早,优先级越高

vue 路由(1)的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  3. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  4. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. C# DataGridView 动态添加列和调整列顺序

    https://yq.aliyun.com/articles/421700 // DataGridView1的ColumnDisplayIndexChanged事件处理方法private void D ...

  2. 安卓测试工具uiautomator无法打开失败报错解决方案

    我们在测试过程中经常会遇到uiautomator报错,识别不了 先用 adb shell ps |grep uiautomator 查看这个进程,一般性都是因为已经有一个进程占用引起的. 所以是被占用 ...

  3. SpringIOC的概念理解、构造器注入、setter注入、p命名空间注入、IOC容器介绍与比较

    1.IOC概念理解 IOC(Inversion of Control)即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...

  4. Redhat乱码

    1 首先可以使用echo $LANG命令输出当前字符集. 2 我们需要把字符集改为zh_CN.UTF-8,在/etc/sysconfig/i18n文件中进行修改 3 使用source  /etc/sy ...

  5. Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

  6. Linux之磁盘信息查看

    一.磁盘情况查询 1.查看磁盘整体情况 命令:df 参数: -a:列出所有的文件系统,包括系统特有的/proc等文件系统 -k:以KB的容量显示各文件系统 -m:以MB的容量显示各文件系统 -h:以人 ...

  7. Vim里常见的几个不可见字符

    Vim里常见的几个不可见字符:^@ = 0x00 Null值^I = 0x09 水平制表^J = 0x0A 换行^M = 0x0D 回车

  8. UI组件--element-ui合计行在横向滚动条下面的解决方法

    使用element-ui合计功能, 因列数较多, 产生横向滚动条: 但是合计行却在滚动条下面, 拖动滚动条合计行不会跟着横向滚动. 在当前页面添加以下样式: <style lang='less' ...

  9. Android 项目配置 gitlab-ci 持续集成

    一.项目根目录下创建一个 .gitlab-ci.yml 文件 然后在 .gitlab-ci.yml 中配置持续集成的脚本: 脚本配置详细可以看: Configuration of your jobs ...

  10. 换工作之后需要兼容ie8的我

    以下是我ie8踩得坑,总结了一下,以免以后会遇到,虽然有的度娘也能搜到但是偶尔看看自己的文章也能学到很多(后续如有添加继续补上) 1,ie8 input框建议不要使用line-height去撑高度,在 ...