首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue-Router的使用方法

Posted in Javascript onSeptember 05, 2018

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html

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:'<h1>登录组件</h1>'
    }
    var register={
      template:'<h1>注册组件</h1>'
    }
    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:'<h1>登录组件</h1>'
    }
    var register={
      template:'<h1>注册组件</h1>'
    }
    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:'<h1>登录组件---{{$route.query.id}}--{{$route.query.name}}</h1>',
      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:'<h1>登录组件---{{$route.params.id}}</h1>',
      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>
   <h1>这是 Account 组件</h1>

   <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: '<h3>登录</h3>'
  }

  var register = {
   template: '<h3>注册</h3>'
  }

  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:'<h1 class="header">头部区域</h1>'
    }
    var leftBox={
      template:'<h1 class=left>左部菜单区域</h1>'
    }
    var mainBox={
      template:'<h1 class="main">主体内容区域</h1>'
    }

我们在页面上使用上述命名视图时使用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;
    }
    h1{
      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-Router的使用方法

- Author -

镇?旁谘罢胰松?勘甑穆飞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
div层的移动及性能优化
Nov 16 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
jQuery实用技巧必备（上）
Nov 02 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 #Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 #Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 #Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 #Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 #Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 #Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 #Javascript
React(6) i7 6700(1) 对讲机(1) win10(43) R72E(1) ICOM(2) DE1102(1) i5 9400(1) GTX1660(1) R71E(1)
You might like
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
koa-router源码学习小结
2018/09/07 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
python 实时遍历日志文件
2016/04/12 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python 列表推导式使用详解
2019/08/29 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
免税水晶：Duty Free Crystal
2019/05/13 全球购物
博士毕业生自我鉴定范文
2014/04/13 职场文书
个人求职信范文
2014/05/24 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
劳模事迹材料范文
2014/12/24 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
python通配符之glob模块的使用详解
2021/04/24 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python