当前位置:网站首页 / 技术杂谈 / 正文

实际项目使用vue-router

时间:2019年06月12日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 125次 | 评论 0

前言:最近在做饿了吗项目,会一直分享在项目中遇到的难点和坑,这里说一下在项目中vue-router的用法。

项目环境:

1、使用vue-cli构建项目结构

2、sublime编辑器(推荐)

3、谷歌浏览器

具体就不再累赘了……

一、安装vue-router

最新版本的vue-cli脚手架构建项目时提供了vue-router安装选项,可在搭建项目时进行安装。

未安装的进行安装

npm install vue-router –save

package.json

 "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

配置文件中存在说明已经安装成功。

二、使用

版本:”vue”: “^2.5.2”, “vue-router”: “^3.0.1”

按照完成后,在main.js文件中需要导入且注册,再实例化,配置路由;

目录结构:

目录结构 实际项目使用vue-router 技术杂谈

App.vue

定义了三个路由跳转链接

<div class="tab-item">
      <router-link to="/goods">商品</router-link>    
</div>
<div class="tab-item">
      <router-link to="/ratings">评论</router-link>    
</div>
<div class="tab-item">
      <router-link to="/seller">商家</router-link>    
</div>

路由跳转后显示区域

<router-view></router-view>

main.js

//es6语法引入
import VueRouter from 'vue-router';

//引进组件
import goods from './components/goods/goods';
import ratings from './components/ratings/ratings';
import seller from './components/seller/seller';

//注册路由
Vue.use(VueRouter);

//定义路由数组,配置多条路由
const routes = [
{path:'/goods',component:goods},
{path:'/ratings',component:ratings},
{path:'/seller',component:seller},
{path:'/',redirect:'/goods'}     //重定向
]

//实例化
var router = new VueRouter(
    {routes},
    );

//注册到根实例中
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  // 注入到根实例中
  components: { App },
  template: '<App/>'
})

注意:

一定要注意版本,版本不同,,变动很大,使用其他版本的可以参考官方文档进行配置。

推荐您阅读更多有关于“vue-router饿了吗,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。