一、vue route是什么?

Vue Router是vue.js官方的路由管理器。主要有以下几种功能

1、路由和视图表的配置。(已明白)

2、模块化和基于组件的路由配置。(已明白)

3、路由参数、查询、通配符。(已明白)

4、基于Vue.js过渡系统的视图过渡效果

5、颗粒度的导航控制。

6、带有自动激活的CSS class的链接。

7、Html5历史模式或hash模式,在IE9中自动降级。

8、自定义滚动条行为。

二、创建一个基本的路由

路由如名,他是地址和模板之间的关系。

const routes= new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/HelloWorld/:id',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'*',
name:'Nofind',
component:Nofind
}
]
});

一个$route的属性:

1、path

字符串,等于当前路由对象的路径,会被解析为绝对路径,如“/”,"/Home"。

2、params

对象,包含路由中动态片段和全匹配片段的键值对。

3、query

对象,包含路由中查询参数的键值对。?后面的query参数

4、route

路由规则所属的路由器(以及其所属的组件)。

5、matched

数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象.

6、name

当前路径的名字,如果没有使用具名路径,则名字为空

三、嵌套路由

嵌套路由就是路由中的路由,路径的子路径。

PS:父路由节点,一定要有router-view来承载子路由。

06 vue router(一)的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  5. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  6. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. python中的堆和栈

    内存中的堆栈和数据结构堆栈不是一个概念,可以说内存中的堆栈是真实存在的物理区,数据结构中的堆栈是抽象的数据存储结构.内存空间在逻辑上分为三部分:代码区.静态数据区和动态数据区,动态数据区又分为栈区和堆 ...

  2. Redis Java连接池调研

    Redis Java连接池调研 线上服务,由于压力大报错RedisTimeOut,但是需要定位到底问题出现在哪里? 查看Redis慢日志,slowlog get 发现耗时最大的也是11000us也就是 ...

  3. jQuery选择器(6)

    一:基本选择器 标签选择器:$("标签名"); 返回一组元素集合(匹配相同的标签名) 类选择器:$(".class类名"); 返回一组元素集合(匹配相同的cla ...

  4. Android中的“再按一次返回键退出程序”代码实现

    1 用户在退出应用前给出一个提示是很有必要的,因为可能是用户并不真的想退出,而只是一不小心按下了返回键,大部分应用也是这么做的,但也有些应用的做法是在应用退出去前给出一个Dialog,我觉得这样不太友 ...

  5. Hive运行原理--JOIN

    对于 JOIN 操作: INSERT OVERWRITE TABLE pv_users SELECT pv.pageid, u.age FROM page_view pv JOIN user u ON ...

  6. C++入门经典-例9.1-函数模板,函数模板的作用,使用数组作为模板参数

    1:函数模板不是一个实在的函数,因此编译器不能为其生成可执行的代码.定义函数模板只是一个对函数功能框架的描述,在具体执行时,将根据传递的实际参数决定其功能. 2:函数模板定义的一般形式如下: temp ...

  7. HttpClient : java.net.SocketException: Connection reset

    1. 问题排查 httpclient : 4.5.5 排查过程 : 一次SocketException:Connection reset 异常排查 主要原因 : 调用 http 请求时发生了 Sock ...

  8. uniapp导航栏自定义按钮及点击事件

    本文链接:https://blog.csdn.net/qq_33807889/article/details/89945674第一步:显示按钮假设页面名称为:AddSort 在pages.json中找 ...

  9. 【黑马Javaweb】1.1Junit单元测试

    黑马第一天学习 今日内容 Junit单元测试: 测试分类: Junit使用:白盒测试 今日内容 1.1Junit单元测试 1.2.反射 1.3.注解 Junit单元测试: 测试分类: 1.黑盒测试:不 ...

  10. react 路由

    react 提供了实现路由的方式,不过需要我们下载插件 react-router-dom 当我们下载好了插件,然后我们可以通过 import {} from 'react-router-dom' 来引 ...