vue router html模板,vue.router
一.安装vue-router
vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。npm install vue-router --save
二.解读router/index.js文件我们用vue-cli生产了我们的项目结构,你可以在src/router/index.js文件,这个文件就是路由的核心文件
importRouterfrom'vue-router'//引入vue-router
importHellofrom'@/components/Hello'//引入根目录下的Hello.vue组件
Vue.use(Router)//Vue全局使用Router
exportdefaultnewRouter({
routes:[//配置路由,这里是个数组
{//每一个链接都是一个对象
path:'/',//链接路径
name:'Hello',//路由名称,
component:Hello//对应的组件模板
}
]
})
三.简易导航制作
1》改造App.vue的导航代码
2》改写components/Hi.vue页面
3》在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue
4》修改router/index.js代码
四.vue-router如何参数传递
方法1,使用name传参(实际开发并不常用)
(1)在路由配置文件中写name
(2)App.vue 中接收参数{{ $route.name }}}
方法2,修改html模板中的router-link标签
注意事项:(1)name的值要和路由配置中的name保持一致
(2)参数params的值可以传多个,是对象的形式存在的 key:value
操作方法:
1.router文件中index.js
2.App.vue文件(注意,如果为动态传参,提前必须加v-bind:或者其缩写:)
3.组件文件中的hi1.vue文件
最终显示效果为
方法3.vue-router 利用url传递参数---- :冒号的形式传递参数
在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。
扩展:url里面的正则
加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。path:'/params/:newsId(\\d+)/:newsTitle',
加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到。
五.单页面多路由区域操作
实际需求是这样的,在一个页面里我们有2个以上区域,我们通过配置路由的js文件,来操作这些区域的内容。例如我们在src/App.vue里加上两个标签。我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,在下面新写了两行标签,并加入了些CSS样式。
现在的页面中有了三个标签,也就是说我们需要在路由里配置这三个区域,配置主要是在components字段里进行。
六.vue-router 的重定向-redirect
redirect基本重定向
路由文件index.js配置路由
App.vue文件
重定向时传递参数
路由文件index.js配置路由(redirect直接写要跳转的路径)
App.vue文件
七.alias别名的使用
1.首先我们在路由配置文件里(/src/router/index.js),给Home路径起一个别名,huaqian。
2.配置我们的,起过别名之后,可以直接使用标签里的to属性,进行重新定向。
redirect和alias的区别redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了中的内容。
填坑:别名请不要用在path为’/’中,如下代码的别名是不起作用的。
{
path:'/',
component:Hello,
alias:'/home'
}
八.路由的过渡动画
标签
想让路由有过渡动画,需要在标签的外部添加标签,标签还需要一个name属性。
我们在/src/App.vue文件里添加了标签,并给标签起了一个名字叫fade。
其中过渡模式mode里面的值out-in指的是先退出后进入。默认是in-out
in-out:新元素先进入过渡,完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。
css过渡类名:组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
那我们就在App.vue页面里加入四种CSS样式效果,并利用CSS3的transition属性控制动画的具体效果。代码如下:
九.mode的设置和404页面的处理
mode的两个值
histroy:当你使用 history 模式时,URL 就像正常的 url,例如 http://jsapng.com/lms/,也好看!
hash:默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。
404页面的设置:
用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.
1.设置我们的路由配置文件(/src/router/index.js):
2.新建404页面:
在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。
3.我们在用瞎写一个标签的路径。
十.路由中的钩子
路由配置文件中的钩子函数
我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码:
我们在params路由里配置了bdforeEnter得钩子函数,函数我们采用了ES6的箭头函数,需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。三个参数:
to:路由将要跳转的路径信息,信息是包含在对像里边的。
from:路径跳转前的路径信息,也是一个对象的形式。
next:路由的控制参数,常用的有next(true)和next(false)。
写在模板中的钩子函数
在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。
这是我们写在params.vue模板里的路由钩子函数。它可以监控到路由的进入和路由的离开,也可以轻易的读出to和from的值。
十一.编程式导航
this.$router.go(-1) 和 this.$router.go(1)
这两个编程式导航的意思是后退和前进,功能跟我们浏览器上的后退和前进按钮一样,这在业务逻辑中经常用到。比如条件不满足时,我们需要后退。
router.go(-1)代表着后退,我们可以让我们的导航进行后退,并且我们的地址栏也是有所变化的。
1.我们先在app.vue文件里加入一个按钮,按钮并绑定一个goback( )方法。
2.在我们的script模块中写入goback()方法,并使用this.$router.go(-1),进行后退操作。
this.$router.push(‘/xxx ‘)
这个编程式导航都作用就是跳转,比如我们判断用户名和密码正确时,需要跳转到用户中心页面或者首页,都用到这个编程的方法来操作路由。
我们设置一个按钮,点击按钮后回到站点首页。如上图
vue router html模板,vue.router相关推荐
- vue 引入html模板,vue单页面用script方式引入 使用模板时报错。 - 社区 - 妙味课堂...
html: Examples 姓名:{{item.name}} 年龄:{{item.age}} app.js: (function(Vue){ var list = [ {name: 'tao', ...
- vue html 原始 模板,vue系列3--模板语法(示例代码)
官方的模板语法:https://cn.vuejs.org/v2/guide/syntax.html vue使用的双花括号的语法,mustache语法. 模板部分分为三部分,1.插入值 2.指令 3. ...
- vue自定义html模板,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
- 【分享】终端命令工具 自动生成vue组件文件以及修改router.js
banlg 这个玩意-- angular-cli 他是有这个功能能的--所以可能,大概,也许大家看着会很熟悉,似曾相识, 根据命令行创建(目前命令就一个,后续可以加..加..加..) -1组件文件夹 ...
- 【分享】终端命令工具 自动生成vue组件文件以及修改router.js 1
banlg 这个玩意-- angular-cli 他是有这个功能能的--所以可能,大概,也许大家看着会很熟悉,似曾相识, 根据命令行创建(目前命令就一个,后续可以加..加..加..) -1组件文件夹 ...
- 【Vue】相关生态——Vue Router路由
Vue Router路由 基本使用 带参数的动态路由匹配 捕获所有路由或404 Not found 路由 嵌套路由 编程式导航 重定向和别名 将props传递给路由组件 不同的历史模式 进阶 导航守卫 ...
- no route to host什么意思_Day 74:Vue里的route和router
Hello大家好!我是Cathy海希.今天是我学习编程的第74天. 内容导读 「Shape of Me」是为了我的身体 ? 「Daily Stoic」是为了我的心灵 ?♀️ 「Coding Baby ...
- Vue 随笔1-加入vue router 后发现app被渲染了2次
原因:main中已经render了app,在route中不需要再加入app组件了,直接重定向到home即可 main.js import Vue from 'vue' import App from ...
- 24.Vue路由管理器:Router(进阶篇)
导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.其实,导航守卫就是路由跳转过程中的一些钩子函 ...
最新文章
- Paddle网络结构中的层和模型
- 离散问题的最大似然估计
- 使用 Angular Transfer State 的一个具体例子
- w ndows7端口在哪里,win7电脑遇到端口被占用的情况该如何查看并将其关闭
- 如何提高电脑办公效能
- java中none applicable_Java线程使用技巧学习(二)
- SMART PLC PID算法基本解析(附公式)
- 徐思201771010132《面向对象程序设计(java)》第三周学习总结
- DSP28m35的IPC通讯编程经验
- App平台频频露脸综艺节目 观众到底买账吗?
- 哈工大软件过程与工具----UML图
- SpringMVC返回数据到页面的方法
- 直播实录|百度大脑EasyDL是如何帮助NLP文本提升标注效率的?又如何进行复杂文本分类的?
- 三国志战略版:开荒实录系列—关妹张飞,S11官渡之战开荒
- Xilinx 还是altera
- 国内外MCU厂商及产品线最全盘点
- 走近富兰克林--《富兰克林自传》
- 百度sitemap Api自动提交收录方法
- 程序员面试金典算法题
- 运用Slope进行地学遥感信息的处理
热门文章
- python爬虫抓取双色球_Python爬虫练习:爬取双色球每期的中奖号码,看能不能中奖...
- 移动Ad Hoc下按需距离矢量路由协议AODV实验报告
- Java平凡之路-成长篇(02) -Java技术选型搭配
- 88、气体灭火系统的设计灭火浓度
- 腾讯研究院院长司晓:互联网大脑的人文侧面
- 美容门店信息化管理系统该如何搭建?不妨参考一下百数
- Android Studio 报错提示:Skipped due to earlier error
- OllyDbg 官网及下载地址
- 按键脚本c语言,按键精灵脚本(示例代码)
- SA markdown