Vue

61次阅读
没有评论

共计 5582 个字符,预计需要花费 14 分钟才能阅读完成。

本文丸趣 TV 小编为大家详细介绍“Vue-Router 使用实例代码分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue-Router 使用实例代码分析”文章能帮助大家解决疑惑,下面跟着丸趣 TV 小编的思路慢慢深入,一起来学习新知识吧。

Vue-Router 的最简单使用

1. 先注册路由

2. 将路由注册到 VM 组件中

3. 定义组件

4. 页面定义跳转路径

!DOCTYPE html 
 html 
  head 
  meta charset= UTF-8 
  title /title 
  script src= lib/vue.min.js /script 
  script src= lib/vue-router-3.0.1.js /script 
  style type= text/css 
  /style 
  /head 
  body 
 
  div id= app 
  !--
  由于 Vue-router 的 hash 匹配原则所以我们需要在原定义的路径上加一个 #号
 -- 
  a href= #/login  rel= external nofollow  rel= external nofollow   登录 /a 
  a href= #/register  rel= external nofollow  rel= external nofollow   注册 /a 
  router-view /router-view 
  /div 
  /body 
  script 
 var login={
 template: h2 登录组件 /h2 
 }
 var register={
 template: h2 注册组件 /h2 
 }
 var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: /login ,component:login},
 {path: /register ,component:register}
 ]
 })
 var vm = new Vue({
 el: #app ,
 data:{ },
 methods:{
 
 },
 router:routerObj// 将路由规则对象注册到 VM 实例上
 })
  /script 
 /html

使用 Router-Link 替代 a 标签

这么做主要是为了去掉 a 标签中的为了匹配 hash 地址的“#”, 如下

!DOCTYPE html 
 html 
  head 
  meta charset= UTF-8 
  title /title 
  script src= lib/vue.min.js /script 
  script src= lib/vue-router-3.0.1.js /script 
  style type= text/css 
  /style 
  /head 
  body 
 
  div id= app 
  !--
  由于 Vue-router 的 hash 匹配原则所以我们需要在原定义的路径上加一个 #号
 -- 
 !--  a href= #/login  rel= external nofollow  rel= external nofollow   登录 /a 
  a href= #/register  rel= external nofollow  rel= external nofollow   注册 /a -- 
  router-link to= /login  tag= span 登录 /router-link 
  router-link to= /register 注册 /router-link 
  router-view /router-view 
  /div 
  /body 
  script 
 var login={
 template: h2 登录组件 /h2 
 }
 var register={
 template: h2 注册组件 /h2 
 }
 var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: /login ,component:login},
 {path: /register ,component:register}
 ]
 })
 var vm = new Vue({
 el: #app ,
 data:{ },
 methods:{
 
 },
 router:routerObj// 将路由规则对象注册到 VM 实例上
 })
  /script 
 /html

同时,我们还可以利用 tag 标签来渲染 router-link 元素,router-link 默认渲染为 a 链接元素,使用 tag 标签可以渲染其他元素,上述代码中渲染为 span 元素了。无论渲染成什么元素,都依然与 a 连接一样拥有跳转的点击事件

重定向技术以及默认路径

默认路径

我们可以使用默认路径的方式指定根路径, 只需要在上述路由定义的方式中加入默认路径即可

var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: / ,component:login},
 {path: /login ,component:login},
 {path: /register ,component:register}
 ]
 })

重定向方式指定默认路径

同样的使用一行代码即可直接重定向到 login 路径下,相比上述的默认路径,此方式在 url 的展示上更为明显

var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: / ,redirect: /login},
 {path: /login ,component:login},
 {path: /register ,component:register}
 ]
 })

路由选中之后高亮设置

使用默认类设置为高亮

Vue 为 router-link 内置了一个连接点击之后高亮的类 router-link-active, 即可以在自己的 style 中设置

style type= text/css 
 .router-link-active{
 color: red;
 font-weight: 800;
 font-style: italic;
 font-size: 30px;
 }
  /style

使用自定义类名

当我们想使用第三方定义的选中样式,或者是自己想定义更为简洁的样式,可以使用 linkActiveClass 来定义,即在路由初始化时指定类名,在指定样式时再自定义样式

var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: / ,redirect: /login},
 {path: /login ,component:login},
 {path: /register ,component:register}
 ],
 linkActiveClass: myactive 
 })

指定样式

style type= text/css 
 .router-link-active,.myactive{
 color: red;
 font-weight: 800;
 font-style: italic;
 font-size: 30px;
 }
  /style

路由传参

使用 query 方式传递参数

首先我们再设置路由链接是指定参数

router-link to= /login?id=10 name=zhao 登录 /router-link

且可以指定并获取多个参数,主要是再定义的组件对象内部使用 created 方法来获得

var login={ template: h2 登录组件 ---{{$route.query.id}}--{{$route.query.name}} /h2 ,
 created(){ console.log(this.$route.query.id)
 }
 }

使用 params 方式传递参数

首先我们在路由定义的时候采用: 定义 params 参数

var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: /login/:id/:name ,component:login},
 {path: /register ,component:register}
 ],
 })

在实际使用过程中如何传递

  router-link to= /login/10/zhao 登录 /router-link 
  router-link to= /register 注册 /router-link 
  router-view /router-view

在组件中使用

var login={ template: h2 登录组件 ---{{$route.params.id}} /h2 ,
 created(){ console.log(this.$route.params.id)
 }
 }

路由嵌套的实现

!DOCTYPE html 
 html 
  head 
  meta charset= UTF-8 
  title /title 
  script src= lib/vue-2.4.0.js /script 
  script src= lib/vue-router-3.0.1.js /script 
  style type= text/css 
  /style 
  /head 
  body 
  div id= app 
  router-link to= /account Account /router-link 
  router-view /router-view 
  /div 
  template id= tmpl 
  div 
  h2 这是  Account  组件 /h2 
  router-link to= /account/login 登录 /router-link 
  router-link to= /account/register 注册 /router-link 
  router-view /router-view 
  /div 
  /template 
  script 
 //  组件的模板对象
 var account = {
 template:  #tmpl 
 }
 var login = {
 template:  h4 登录 /h4 
 }
 var register = {
 template:  h4 注册 /h4 
 }
 var router = new VueRouter({
 routes: [
 {
 path:  /account ,
 component: account,
 //  使用  children  属性,实现子路由,同时,子路由的  path  前面,不要带  / ,否则永远以根路径开始请求,这样不方便我们用户去理解 URL 地址
 children: [ { path:  login , component: login },
 { path:  register , component: register }
 ]
 }
 ]
 })
 //  创建  Vue  实例,得到  ViewModel
 var vm = new Vue({
 el:  #app ,
 data: {},
 methods: {},
 router
 });
  /script 
 /body 
 /html

主要是由 children 属性来实现的,上述代码中由三个易错点

1. 定义路由时,子路由没有‘/

2. 在父组件中定义子组件要写子组件的全路径

3. 在父组件中定义组件同样要加入 router-view 元素

案例:路由命名视图实现经典布局

命名视图在定义路由时使用 components 属性 (注意不是 component) 来定义:

var routerObj = new VueRouter({
 routes:[
 // 此处的 component 只能使用组件对象,而不能使用注册的模板的名称
 {path: / ,components:{
 default:header,
 left:leftBox,
 main:mainBox
 }},
 ]
 })

几个组件分别定义如下

var header={ template: h2  >

我们在页面上使用上述命名视图时使用 router-view 的 name 属性来定义

 div id= app 
  router-view /router-view 
  div id= container 
  router-view name= left /router-view 
  router-view name= main /router-view 
  /div 
  /div

未使用命名属 t 性 name 设置视图组件的将采用 default 命名视图

设置一下样式

  style type= text/css 
 html,body{
 margin: 0;
 padding: 0;
 }
 h2{
 margin: 0;
 padding: 0;
 font-size: 16px;
 }
 .header{
 background-color: #6495ED;
 height: 200px;
 }
 
 #container{
 display: flex;
 height: 600px;
 }
 .left{
 flex: 2;
 background-color: #0000FF;
 }
 .main{
 flex: 8;
 background-color: #8A2BE2;
 }
  /style

Vue 的优点

Vue 具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快等优势,Vue 中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和 dom,可以大大提升访问速度和用户体验。

读到这里,这篇“Vue-Router 使用实例代码分析”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注丸趣 TV 行业资讯频道。

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-07-13发表,共计5582字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)