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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
为什么node.js不适合大型项目
Apr 28 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
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
vscode vue 文件模板的配置方法
2019/07/23 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Python3读取zip文件信息的方法
2015/05/22 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
django使用LDAP验证的方法示例
2018/12/10 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
会计人员演讲稿
2014/09/11 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python