使用vue-router完成简单导航功能-阿里云开发者社区

开发者社区> 玄学酱> 正文

使用vue-router完成简单导航功能

简介:
+关注继续查看

vue-router是Vue.js官方提供的一套专用的路由工具库

安装命令如下

npm i vue-router -D

vue-router 实例是一个Vue插件,我们需要在Vue全局引用中通过Vue.use() 将它接入到Vue实例中。

在我们的工程中,,main.js是默认的程序入口文件,所有的全局配置都会在这个文件中进行。

我们在main.js中加入如下引用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

这样就完成了 vue-router最基本的安装工作了。


接下来我们要实现的功能描述如下

在首页上有两个链接分别是:购物车和个人中心 
点击不同的链接显示不同的内容

首先我们在 src 目录下建立两个组件文件: Cart.vue Me.vue 
新建的两个组件文件的内容暂时都是同样的结构

<template>
  <!-- 这个div里面的内容可设置不同以区分 -->
  <div>购物车</div>
</template>

<script>
export default {}
</script>

<style lang="scss"></style>

接下来就是在main.js文件中定义路由与这些组件之间的匹配规则了。 
VueRouter的定义非常简单:创建一个VueRouter实例,将路由path指定到一个组件类型上

如下代码所示(main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

//引入创建的两个组件
import Cart from './Cart.vue'
import Me from './Me.vue'

//使用路由实例插件
Vue.use(VueRouter)

const router = new VueRouter({
  mode:'history',
  base: '__dirname',
  routes:[
    //将页面组件与path指令的路由关联
    {path:'/cart',component:Cart},
    {path:'/me',component:Me}
  ]
})
new Vue({
  el: '#app',
  //将路由实例添加到Vue实例中去
  router,
  render: h => h(App)
})

我们可以将上面的路由有关的代码提取出来放在另外的一个routes.js文件中去,防止main.js文件的内容越来越长。

新建一个 config 文件夹,然后将routes.js文件加入进去。 
routes.js代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'

//引入创建的两个组件
import Cart from '../Cart.vue'
import Me from '../Me.vue'

//使用路由实例插件
Vue.use(VueRouter)

const router = new VueRouter({
  mode:'history',
  base: '__dirname',
  routes:[
    //将页面组件与path指令的路由关联
    {path:'/cart',component:Cart},
    {path:'/me',component:Me}
  ]
})

export default router;

然后main.js文件代码就减小到如下:

import Vue from 'vue'
import App from './App.vue'

import router from './config/routes'

new Vue({
  el: '#app',
  //将路由实例添加到Vue实例中去
  router,
  render: h => h(App)
})

vue-router 提供了两个指令标签 
<router-view> : 渲染路径匹配到的视图组件 
<router-link> : 支持用户在具有路由功能的应用中导航

在有了上面的两个指令标签,我们就可以在程序入口 App.vue编写相应的代码了:

<template>
  <div id="app">
    <div class="tabs">
      <ul>
        <li>
          <router-link to ="/cart">
            <div>购物车</div>
          </router-link>
        </li>
        <li>
          <router-link to ="/me">
            <div>个人中心</div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <!-- 使用 router-view 渲染视图 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>

<style lang="scss"></style>

到此上面的代码已经实现了预期的功能了。 
然后我们看to ="/cart"这个里面的路径其实已经在{path:'/cart',component:Cart}定义过了,如果需要修改,就得需要这两个地方同时修改(如果有其他地方用的就改动的更多)

那么直接将{path:'/cart',component:Cart}中的路径取出来岂不是很好。

这个时候我们的 vue-router提供了一种隐式的路由引用方式,称之为 —— 命名路由

简单来说就是通过路由的名称引用来取代Url

于是VueRouter的配置代码改为如下:

const router = new VueRouter({
  mode:'history',
  base: '__dirname',
  routes:[
    //将页面组件与path指令的路由关联
    {name:'cart',path:'/cart',component:Cart},
    {name:'me',path:'/me',component:Me}
  ]
})

这样我们在 <router-link >to属性使用v-bind绑定到Vue实例中,然后通过名称直接得到Url

于是App.vue中的链接部分的代码改为如下

        <li>
          <router-link :to ="{name:'cart'}">
            <div>购物车</div>
          </router-link>
        </li>
        <li>
          <router-link :to ="{name:'me'}">
            <div>个人中心</div>
          </router-link>
        </li>

至此,使用vue-router完成了简单导航功能

说明

<router-link>默认渲染成带有正确链接的<a>标签 ,也可以通过配置 tag 属性生成别的标签

比如

        <li>
          <router-link :to ="{name:'cart'}" tag="span">
            <div>购物车</div>
          </router-link>
        </li>
本文作者:zjq_1314520
本文发布时间:2018年03月09日
本文来自云栖社区合作伙伴CSDN,了解相关信息可以关注csdn.net网站。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置。 很多jQuery的使用者都对这一问题深感疑惑。
850 0
在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示。
3523 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11072 0
示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。
630 0
Android下DrawerLayout的使用
Android下DrawerLayout的使用 DrawerLayout见名知意,就是一个具有抽屉效果的布局,看看这个效果图,是不是感觉很炫酷 这么炫的效果其实不一定非要用类似一些SlidingMenu这样的框架才能实现,原生库就有对这种效果的支持,今天我们就一起来学习一下DrawerLayout的使用。
936 0
使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【外传】——Attribute Routing
原文:使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【外传】——Attribute Routing 系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 题外话:由于这个技术点是新学的,并不属于原系列,但借助了原系列的项目背景,故命名外传系列,以后也可能在这个系列中附加一些新的技术。
1017 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20710
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载