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

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

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

在首页上有两个链接分别是:购物车和个人中心

,点击不同的链接显示不同的内容

首先我们在src目录下建立两个组件文件:购物车。vue我。vue

新建的两个组件文件的内容暂时都是同样的结构

& lt; template> 　　,& lt; !——,这个div里面的内容可设置不同以区分,——比; 　　,& lt; div>购物车& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export  default  {} 　　& lt;/script> 　　& lt; style  lang=皊css"祝辞& lt;/style>

接下来就是在main.js文件中定义路由与这些组件之间的匹配规则了。

VueRouter的定义非常简单:创建一个VueRouter实例,将路由路径指定到一个组件类型上

如下代码所示(主要。js)

import  Vue 得到& # 39;vue # 39; 　　import  App 得到& # 39;。/App.vue& # 39; 　　import  VueRouter 得到& # 39;vue-router& # 39;//引入创建的两个组件 　　import  Cart 得到& # 39;。/Cart.vue& # 39; 　　import  Me 得到& # 39;。/Me.vue& # 39;//使用路由实例插件 　　Vue.use (VueRouter) 　　const  router =, new  VueRouter ({ 　　,模式:& # 39;历史# 39; 　　,基础:& # 39;__dirname& # 39; 　　,路线:( 　　,//将页面组件与路径指令的路由关联 　　,{路径:& # 39;/车# 39;,组件:购物车}, 　　,{路径:& # 39;/我# 39;,组件:我} 　　,) 　　}) 　　Vue ({new  　　,el: & # 39; #应用# 39; 　　,//将路由实例添加到Vue实例中去 　　,路由器, 　　,呈现:h =祝辞,h(应用) 　　})

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

新建一个配置文件夹,然后将routes.js文件加入进去。

,则路线。js代码如下

import  Vue 得到& # 39;vue # 39; 　　import  VueRouter 得到& # 39;vue-router& # 39;//引入创建的两个组件 　　import  Cart 得到& # 39;. ./Cart.vue& # 39; 　　import  Me 得到& # 39;. ./Me.vue& # 39;//使用路由实例插件 　　Vue.use (VueRouter) 　　const  router =, new  VueRouter ({ 　　,模式:& # 39;历史# 39; 　　,基础:& # 39;__dirname& # 39; 　　,路线:( 　　,//将页面组件与路径指令的路由关联 　　,{路径:& # 39;/车# 39;,组件:购物车}, 　　,{路径:& # 39;/我# 39;,组件:我} 　　,) 　　}) 　　export  default 路由器;

然后主要。js文件代码就减小到如下:

import  Vue 得到& # 39;vue # 39; 　　import  App 得到& # 39;。/App.vue& # 39; 　　import  router 得到& # 39;。/config/路线# 39; 　　Vue ({new  　　,el: & # 39; #应用# 39; 　　,//将路由实例添加到Vue实例中去 　　,路由器, 　　,呈现:h =祝辞,h(应用) 　　})

vue-router提供了两个指令标签

& lt; router-view>:渲染路径匹配到的视图组件
& lt; router-link>:支持用户在具有路由功能的应用中导航

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

& lt; template> 　　,& lt; div  id=癮pp"比; 　　,& lt; div 类=皌abs"比; 　　& lt;才能ul> 　　& lt;才能li> 　　,,& lt; router-link 用=?cart"比; 　　,,& lt; div>购物车& lt;/div> 　　,,& lt;/router-link> 　　& lt;才能/li> 　　& lt;才能li> 　　,,& lt; router-link 用=?me"比; 　　,,& lt; div>个人中心& lt;/div> 　　,,& lt;/router-link> 　　& lt;才能/li> 　　& lt;才能/ul> 　　,& lt;/div> 　　,& lt; div 类=癱ontent"比; 　　& lt; !——,才能使用,router-view 渲染视图,——比; 　　& lt;才能router-view> & lt;/router-view> 　　,& lt;/div> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export  default  { 　　,名字:“app" 　　}; 　　& lt;/script> 　　& lt; style  lang=皊css"祝辞& lt;/style>

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