使用vue-router完成简单导航功能
Posted 十木禾
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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>
以上是关于使用vue-router完成简单导航功能的主要内容,如果未能解决你的问题,请参考以下文章