vue2.0:(五)、路由vue-router
好的,接下来,我们来写路由。用的是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的更多相关文章
- vue2.0实践 —— Node + vue 实现移动官网
简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...
- vue2.0配置路由
配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...
- Vue2.0实现路由
Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码 HTML代码 <div class="tab"> <route ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue2.0读书笔记3 - router、vuex
1.vue的应用场景.优势.劣势 优势 通常情况下,运行时效率更高:一个事件循环仅一次视图更新,无频繁的DOM操作: 数据与视图分离,通过管理数据流,控制页面的展现,便于维护.且高效: 数据双向绑定, ...
- 六、vue路由Vue Router
一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, a ...
- vue2.0 正确理解Vue.nextTick()的用途
什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...
- Vue2.0 - 全局操作 Vue.set
引:http://www.cnblogs.com/zccblog/p/7192420.html Vue.set 的作用就是在构造器外部操作构造器内部的数据.属性或者方法.比如在vue构造器内部定义了一 ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
随机推荐
- Linux系统上php-cli安装redis扩展
下载 假设已经安装了redis-server,现在我们来安装redis扩展. 下载ZIP包: https://github.com/phpredis/phpredis/tree/master . 解压 ...
- 图形化升级单机oracle 11.2.0.1 到 11.2.0.4
1. 讲补丁包上传到 oracle server ,解压.安装 [root@11g ~]#unzip p13390677_112040_Linux-x86-64_1of7.zip -d /tmp &a ...
- CF 1042A Benches——二分答案(水题)
题目:http://codeforces.com/problemset/problem/1042/A #include<iostream> #include<cstdio> # ...
- 中国移动推出NB-IoT/eMTC/GSM多模通信模组Qualcomm调制解调器支持
亚洲电子消费展(CES Asia)在上海举行.期间,中国移动正式推出NB-IoT/eMTC/GSM三模通信模组A9500.该通信模组采用Qualcomm MDM9206 LTE IoT调制解调器,具有 ...
- struts2的使用知识点
最开始学习java的时候学习过struts,但是对配置和struts的理解深度不够,现在工作虽然再用,但是自己搭建环境和使用心得始终很零散,所以现在决定重新理一遍,有条理的学习一下struts. 至于 ...
- InformationSecurity:template
ylbtech-InformationSecurity: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:ht ...
- android学习点滴一:android环境的搭建
东一点西一点,很多时间都浪费了.是该系统性的做好自己的东西了. <android学习点滴一:android环境的搭建> [环境变量]变量名:JAVA_HOME变量值:C:\Java\jdk ...
- 卸载openjdk安装java后,netbeans启动不了
Cannot find java. Please use the --jdkhome switch. 默认的jdkhome不存在了,所以重新指定一下就可以了. 修改 /netbeans-8.0/etc ...
- VC/MFC的HDC,CDC,CWindowDC,CClientDC,CPaintDC详解:
VC/MFC的HDC,CDC,CWindowDC,CClientDC,CPaintDC详解: 首先说一下什么是DC(设备描述表) 解:Windows应用程序通过为指定设备(屏幕,打印机等)创建一个设备 ...
- HDU 1506【单调栈】
思路: 转化成对于某一位置为最小值求向两边最远>=他的位置,用单调栈就能轻易完成. 那么ans=(left+right)*h[i]; 维护单调递增还是递减呢? 我们能很快反应到,一旦碰到一个比他 ...