Vue路由讲解
1>router-link和router-view组件
2>路由配置
a.动态路由
import Home from "@/views/Home.vue"; export default [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue")
},
{
path: "/argu/:name",//动态路由
component: () => import("@/views/argu.vue")
}
];
<template>
<div>
<!-- 拿到动态路由的参数 $route:当前加载页面的路由对象 -->
{{$route.params.name}}
</div>
</template> <script>
export default {
//
};
</script>
b.嵌套路由
import Home from "@/views/Home.vue";
export default [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue")
},
{
path: "/argu/:name",
component: () => import("@/views/argu.vue")
},
//嵌套路由的使用
{
path: "/parent",
component: () => import("@/views/parent.vue"),
children: [
{
path: "child",//此处不能加/
component: () => import("@/views/child.vue")
}
]
}
];
child.vue:
<template>
<div>I am child</div>
</template>
c.命名路由
import Home from "@/views/Home.vue"; export default [
{
path: "/",
name: "home",//加上name属性 命名路由
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue")
},
{
path: "/argu/:name",
component: () => import("@/views/argu.vue")
},
//嵌套路由的使用
{
path: "/parent",
component: () => import("@/views/parent.vue"),
children: [
{
path: "child",
component: () => import("@/views/child.vue")
}
]
}
];
d.命名视图
import Home from "@/views/Home.vue"; export default [
{
path: "/",
name: "home",//加上name属性 命名路由
component: Home
},
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue")
},
{
path: "/argu/:name",
component: () => import("@/views/argu.vue")
},
//嵌套路由的使用
{
path: "/parent",
component: () => import("@/views/parent.vue"),
children: [
{
path: "child",
component: () => import("@/views/child.vue")
}
]
},
{
path: "/named_view",
//加载多个组件 用复数
components: {
default: () => import("@/views/child.vue"),
email: () => import("@/views/email.vue"),
tel:()=>import("@/views/tel.vue")
}
}
];
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>|
<!-- 命名路由 -->
<router-link :to="{name:'about'}">About</router-link>
<!-- <router-link to="/about">About</router-link> -->
</div>
<!-- 路由视图组件 -->
<router-view/>
<router-view name="email"/>
<router-view name="tel"/>
</div>
</template>
child.vue
<template>
<div>I am child</div>
</template>
email.vue
<template>
<div>email:07807958@qq.com</div>
</template>
tel.vue
<template>
<div>tel:18976543210</div>
</template>
打开浏览器:http://localhost:8080/#/named_view
打开调试工具,可以直观的看出各路由:
3>JS操作路由(编程式导航)
4>重定向和别名
import Home from "@/views/Home.vue"; export default [
{
path: "/",
name: "home", //加上name属性 命名路由
component: Home
},
{
path: "/main",
// redirect: "/", // redirect: {
// name:"home"
// } redirect: to => {
//console.log(to);
// return {
// name:"home"
// }
return '/'
}
}
];
console.log(to)输出信息:
路由别名:
export default [
{
path: "/",
alias:'/home_page',
name: "home", //加上name属性 命名路由
component: Home
}]
Vue路由讲解的更多相关文章
- Vue路由(vue-router)详细讲解指南
中文文档:https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- vue实例讲解之axios的使用
本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
随机推荐
- IP分片 与 TCP分段的区别 !!!!careful========以及udp中一个包大小究竟为多大合适 ==========三次握手四次挥手细节
首先声明:TCP分片应该称为TCP分段 TCP/IP详解--TCP的分段和IP的分片 分组可以发生在运输层和网络层,运输层中的TCP会分段,网络层中的IP会分片.IP层的分片更多的是为运输层的UDP服 ...
- Lights Out Game
Lights Out Game 在线的游戏:http://www.neok12.com/games/lights-out/lights-out.htm 瞎试一阵子未成之后,终于找到了标准答案:http ...
- DedeCMS织梦自定义图片字段调用出现{dede:img ..}
做站过程中碰到这样一个问题,找到解决办法收藏分享:为什么在首页用自定义列表调用出来的图片字段不是正确的图片地址,而是类似于: {dede:img text='' width='270' height= ...
- Jersey初始化配置
一 实际项目配置 公司VIP平台因为业务的特殊性,对业务数据的操作.以及前后端解耦等要求,使用到了jersey框架.同时使用到了spring框架. 二 jersey初始化 配置web项目配置文件web ...
- Linux 下 zip 文件解压乱码解决方案,ubuntu16.10亲测可用
文章来源: https://www.zhihu.com/question/20523036 今天邮件中收到了一个压缩文件,解压后却是乱码,从网上也找了几个方法,目前这个方法还是比较可靠的,如下所示: ...
- npm EPERM: operation not permitted, rename解决
此问题并非权限问题! 执行如下3条命令解决: 1.清理npm缓存 npm cache clean --force 2.升级npm版本 npm install -g npm@latest --force ...
- oracle账户密码过期,修改为无限制
查看用户的proifle是哪个,一般是default: sql>SELECT username,PROFILE FROM dba_users; 查看指定概要文件(如default)的密码有效期设 ...
- image压缩
public byte[] compressPic(byte[] data) { if(data.length == 0){ return new byte[0]; } Image img = nul ...
- Android学习记录帖
1.OptionMenu的创建过程类图 2. OptionMenu的isActionBarMenu 在PhoneWindow的preparePanel中会根据设定的FEATURE来给变量isActio ...
- Flask文件目录----- db文件
import sqlite3 import click from flask import current_app, g from flask.cli import with_appcontext d ...