好的,接下来,我们来写路由。用的是vue2.0的路由。

步骤一:配置main.js

import Vue from 'vue';
import App from './App';
import router from './router'; <!------------------------这里引入的是router目录,会默认识别里面的index.js文件(不能是其他名字) /*eslint-disable no-new*/
new Vue({ <!------------------------实例化vue对象配置选项路由及渲染App组件
router,
el:'#app',
render: h => h(App)
})

步骤二:配置App.vue,写入组件

<template>
<div id="aaa">
<v-header></v-header>
<div class="tab">
<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>
</div>
<router-view></router-view>
<div class="footer">
im footer
</div>
</div>
</template> <script>
import header from './components/header/header.vue'; export default{
components:{
'v-header':header
}
}
</script> <style lang="less"></style>

  注意:知识点哦,知识点:

  1、使用 router-link 组件来导航

    2、通过传入‘to’ 属性指定链接(与router/index.js的path属性相一致)

  3、router-link 默认会被渲染成一个 <a>标签

  4、路由匹配到的组件将渲染在 router-view 中。

步骤三:在router文件中创建路由并配置路由映射 ,通过export输出router到main.js文件中。

 import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue'; Vue.use(VueRouter); const router = new VueRouter({
mode: 'history',
linkActiveClass: 'active',
routes: [
{ path: '/goods',component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller },
{ path: '*', redirect: '/goods' }
]
});
export default router;

  注意:知识点哦,知识点:

  1、mode设置为history表示利用了history.pushState API来完成URL跳转而无须重新加载页面。

  2、linkActiveClass 设置当前选中项的样式类名

  3、最重要的是routes(注意:不是routers,没有r)

    1)、path 就是 router-link to后面跟的链接,注意保持一致;

    2)、component 对应的组件,常见有两种写法:

        a.第一种就是如上图。

        b.第二种可以:

routes: [ { path: '/goods',component:require('../components/goods/goods.vue') }, { path: '/ratings', component: require('../components/ratings/ratings.vue') }]

     3) redirect是指重定向,将根路径重定向到指定路径。也就是默认路径是哪个。

    本篇文章本来打算自己写的,后来在思考问题查资料的时候发现有一篇文章写的真是符合我的对这篇文章的期望,我就复制了他的文章。原文链接:https://www.cnblogs.com/smileTonya/p/6807385.html

      

vue2.0:(五)、路由vue-router的更多相关文章

  1. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  2. vue2.0配置路由

    配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...

  3. Vue2.0实现路由

    Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码 HTML代码 <div class="tab"> <route ...

  4. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  5. vue2.0读书笔记3 - router、vuex

    1.vue的应用场景.优势.劣势 优势 通常情况下,运行时效率更高:一个事件循环仅一次视图更新,无频繁的DOM操作: 数据与视图分离,通过管理数据流,控制页面的展现,便于维护.且高效: 数据双向绑定, ...

  6. 六、vue路由Vue Router

    一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  a ...

  7. vue2.0 正确理解Vue.nextTick()的用途

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...

  8. Vue2.0 - 全局操作 Vue.set

    引:http://www.cnblogs.com/zccblog/p/7192420.html Vue.set 的作用就是在构造器外部操作构造器内部的数据.属性或者方法.比如在vue构造器内部定义了一 ...

  9. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

随机推荐

  1. JQuery Mobile+cordova构建一个Android项目

    1.安装Android开发环境     Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...

  2. XML常用操作

    C#操作XML非常简单 一是写入: 生明一个xelment 再在它的父节点Add就可以,也可以用生明的节点.SetAttribute("节点名称","节点对应的值&quo ...

  3. css如何改变placeholder的默认颜色值

    input:-moz-placeholder {/* Mozilla Firefox 4 to 18*/ color: red; input::-moz-placeholder {/* Mozilla ...

  4. 2.5玩转xargs

    我们可以利用管道将一个命令的stdout(标准输出)重定向到另一个命令的stdin(标准输入).有些命令只能以命令行参数的形式接受数据,而无法通过stdin接受数据流.这时候就没法使用管道.那么xar ...

  5. PHP正则表达式,看这一篇就够啦!

    前言 不知道你们有没有这个感觉,看正则表达式就像看天文数字一样,什么电话号码.邮箱的正则表达式,上网复制一下粘贴下来就搞定了.完全不知道这写的是什么玩意.后来我自己也想学一下,因为感觉用处还是挺大的. ...

  6. aimOffset注意事项

    AimOffset的记录 AimOffset是什么,就是动画(相对于某个具体姿势比如待机动作的)叠加. AimOffset有什么用,简单说就是叠加动作,比如无双中骑马挥刀动作叠加. 注意步骤 1所有分 ...

  7. 程序员除了会CRUD之外,还应该知道什么叫CQRS!

    今天主要跟大家分享一下什么是 CQRS,以及在项目中如何去使用.   CRUD系统 我们平常最熟悉的就是三层架构,通常都是通过数据访问层来修改或者查询数据,一般修改和查询使用的是相同的实体.然后通过业 ...

  8. jmeter接口测试-调用java的jar包-csv参数化请求-BeanShellPreProcessor生成验签作为请求验证参数-中文乱码----实战

    背景及思路: 需求:要做 创建新卡 接口的测试,要求: 1. 不需要每次手动修改请求参数. 方案:文中先用excle将数据准备好,导出为csv格式,再用jmeter的csv请求进行参数化 2. 卡号需 ...

  9. 双系统安装Linux的步骤以及一些误区

    1.一次安装失败引发的思考 笔者安装双系统(Windows 7+ Ubuntu 16.01)时参考了如何安装win10和linux [ubuntu14]双系统这篇百度经验,却发现安装后并没有如期进入U ...

  10. Mybatis Plugin(拦截器)的开发

    1.Plugin   MyBatis 允许使用插件来拦截的方法调用包括: • Executor (update, query, flushStatements, commit, rollback, g ...