Vue 路由知识二(工程模式下路由的配置)
vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装的:npm/cnpm install vue-router --save-dev。
在路由的核心文件:src/router/index.js分析:
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称,
component: Hello //对应的组件模板
}
]
})
router-link制作导航:
导航链接,我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签,我们先来看一下它的语法。
<router-link to="/">[显示字段]</router-link>
to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” ,
[显示字段] :就是我们要显示给用户的导航名称,比如首页 新闻页 产品页等等。
子路由的写法是在原有的路由配置下加入children字段。
children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]
children字段后边跟的是个数组,数组里和其他配置路由基本相同,需要配置path和component。(在配置路由文件前,需要先用import引入相应组件)
路由传参方式一:在路由文件src/router/index.js里配置name属性。
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:
<p>{{ $route.name}}</p>
路由传参方式二:通过<router-link> 标签中的to传参。
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.
name:就是我们在路由配置文件中起的name值。
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
单页面多路由区域操作:在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。
vue-router 利用url传递参数:
我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。
在配置文件里以冒号的形式设置参数。我们在src/router/index.js文件里配置路由。
{
path:'/params/:newsId/:newsTitle',
component:Params
}
<router-link to="/params/1222444/nihao">params</router-link> |
<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
</div>
</template> <script>
export default {
name: 'params',
data () {
return {
msg: 'hellow vue-router'
}
}
}
</script>
path:'/params/:newsId(\\d+)/:newsTitle',
加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。
重定向时传递参数:只需要在redirect后边的参数里复制重定向路径的path参数就可以。
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
alias别名的使用:
{
path: '/hi1',
component: Hi1,
alias:'/task'
}
2.配置我们的<router-link>,起过别名之后,可以直接使用<router-link>标签里的to属性,进行重新定向。
<router-link to="/task">gogo</router-link>
redirect和alias的区别
redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。
注意:别名请不要用在path为’/’中,如下代码的别名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}
Vue 路由知识二(工程模式下路由的配置)的更多相关文章
- Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
- history路由模式下的nginx配置
路由模式 众所周知,浏览器下的单页面应用的路由模式有下面两种: hash 模式和 history 模式.hash 模式通用性好,而且不依赖服务器的配置,省心省力,但是缺点是不够优雅.相比于 hash ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- webpack + vue 在dev和production模式下的小小区别
上周的某一天,和一位同样是前端技术极度爱好的开发者朋友聊天,他在提出了一个问题,他写的vue程序为什么在dev模式运行良好,而在production模式就直接报错了.这让我感到惊讶,还有这么神奇的事情 ...
- 066——VUE中vue-router之rewrite模式下配置404页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端知识(二)08-Vue.js的路由-谷粒学院
目录 一.锚点的概念 二.路由的作用 三.路由实例 1.复制js资源 2.创建 路由.html 3.引入js 4.编写html 5.编写js 一.锚点的概念 案例:百度百科 特点:单页Web应用,预先 ...
- WPF MVVM模式下路由事件
一,路由事件下三种路由策略: 1 冒泡:由事件源向上传递一直到根元素.2直接:只有事件源才有机会响应事件.3隧道:从元素树的根部调用事件处理程序并依次向下深入直到事件源.一般情况下,WPF提供的输入事 ...
- ensp的基础路由命令,接口,下一跳的配置,入门必备
关于ensp入门事情,第一件事当是安装必备三件套:而后,应该是接触路由和PC机了,最烦人满屏代码,眼花缭乱: 今天写一篇零基础接触ensp的首次操作,PC-路由-路由-PC的互通实验: 实验要拉出两台 ...
- 1_NAT模式和桥接模式下的网络配置
相信当你看到这篇文章时,你一定对linux的桥接模式和NAT模式有所了解,所以你应该是能看懂这篇文件的,希望对你有所帮助,figthing ! 一.桥接模式:虚拟机和主机是连在同一个路由下的. ...
随机推荐
- Django初识二
1,在django中用于提交的form表单中的三要素: 1.1>form标签要有action和method,上传文件需要额外指定的enctype 1.2>获取用户输入的标签要有name属性 ...
- 深入理解Java执行时数据区
前情回想 在本专栏的前12篇博客中. 我们主要大致介绍了什么是JVM, 而且具体介绍了class文件的格式. 对于深入理解Java, 或者深入理解运行于JVM上的其它语言, 深入理解class文件格式 ...
- Spring Boot集成MyBatis与分页插件
Maven依赖: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>p ...
- solr 命令
本文为转载内容:源地址:http://blog.csdn.net/matthewei6/article/details/50620600 查看帮助 bin/solr -help ...
- Java 并发 —— 读写锁(ReadWriteLock)
读写锁(ReadWriteLock),顾名思义,就是在读写某文件时,对该文件上锁. 1. ReentrantReadWriteLock 三部曲: 加锁: 读写操作: 解锁:(为保证解锁操作一定执行,通 ...
- BZOJ4259:残缺的字符串(FFT与字符串匹配)
很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同程度的残缺. 你想对这两 ...
- python的partition() 方法
描述 partition() 方法用来根据指定的分隔符将字符串进行分割. 如果字符串包含指定的分隔符,则返回一个3元的元组,第一个为分隔符左边的子串,第二个为分隔符本身,第三个为分隔符右边的子串. p ...
- Ceph之对象存储网关RADOS Gateway(RGW)
一.Ceph整体架构及RGW在Ceph中的位置 1.Ceph的整体架构 Ceph是一个统一的.分布式的的存储系统,具有优秀的性能.可靠性和可扩展性.Ceph支持对象存储(RADOSGW).块存储(RB ...
- E20170519-ts
numeric adj. 数字的; 数值的; nibble vt. 啃,一点一点地咬(吃); rational adj. 理性的; 合理的; n. 合理的事物; [数] 有理数; numerato ...
- Codeforces Round #209 (Div. 2) C - Prime Number
传送门 题意 给出n个数及x,求 \[\frac{\sum _{i=1}^n x^{a_1+a_2+...+a_{i-1}+a_{i+1}+...a_n}}{\prod_{i=1}^n x^{a_i} ...