vueJs+webpack单页面应用--vue-router配置
vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+
npm安装vue-router:
$ npm install vue-router --save-dev
使用:
1.引入 vue-router: import VueRouter from 'vue-router';
2.注册: Vue.use(VueRouter);
3.配置路径:
const routes = [
{ path: '/goods', component: goods },
{ path: '/seller', component: seller },
{ path: '/ratings', component: ratings }
];
const router = new VueRouter({
linkActiveClass: 'active',
routes: routes
});
4.初始化Vue(备注:
直接new Vue不赋值 需上面加上 /* eslint-disable no-new */注释
):
/* eslint-disable no-new */
new Vue({
router: router,
...App
}).$mount('#app');
5.push进来第一个路径
router.push('/goods');
main.js源码:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
import goods from './components/goods/goods';
import seller from './components/seller/seller';
import ratings from './components/ratings/ratings'; Vue.use(VueRouter); const routes = [
{ path: '/goods', component: goods },
{ path: '/seller', component: seller },
{ path: '/ratings', component: ratings }
]; const router = new VueRouter({
linkActiveClass: 'active',
routes: routes
}); /* eslint-disable no-new */
new Vue({
router: router,
...App
}).$mount('#app'); router.push('/goods');
1. 定义路由链接: <router-link to="/goods">商品</router-link>
2. 路由匹配到的组件将渲染在这里 <router-view></router-view>
App.vue 源码:
<template>
<div>
<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>
</template> <script>
import header from './components/header/header';
export default {
components: {
'v-header': header
}
};
</script> <style lang="stylus" rel="stylesheet/stylus">
.tab
font-size: 28px
display: flex
.tab-item
height: 40px
line-height: 40px
text-align: center
flex: 1
</style>
vueJs+webpack单页面应用--vue-router配置的更多相关文章
- Kendo UI 单页面应用(二) Router 类
Kendo UI 单页面应用(二) Router 类 Route 类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route 通过 Url 的片段功能(#url)和流量器的浏览历史功能融合在一 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- webpack 单页面应用实战
这篇文章将介绍如何利用 webpack 进行单页面应用的开发,算是我在实际开发中的一些心得和体会,在这里给大家做一个分享.webpack 的介绍这里就不多说了,可以直接去官网查看. 关于这个单页面应用 ...
- Oracle JET 单页面应用程序Router 使用(上)
单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...
- 友盟统计单页面应用vue
根据友盟官方提示在index.html的body标签末尾加入相关代码后: 后来发现,由于项目为单页面应用,在路由发生跳转时(到其他页面了),并不会重新将新页面加入统计中.需要在App.vue页面中,监 ...
- vue router 配置默认页/404页面
*号通配404默认页面
- Kendo UI开发教程(24): 单页面应用(二) Router 类
Route类负责跟踪应用的当前状态和支持在应用的不同状态之间切换.Route通过Url的片段功能(#url)和流量器的浏览历史功能融合在一起.从而可以支持把应用的某个状态作为书签添加到浏览器中.Rou ...
- IIS部署的H5的单页面跳转的配置
<?xml version="1.0" encoding="UTF-8"?><configuration> <system.web ...
- vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案
项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后, ...
随机推荐
- crontab 管理指定用户的定时任务
创建用户定时任务文件 touch /var/spool/cron/target_user crontab -u target_user /var/spool/cron/target_user 编辑用户 ...
- iOS常见算法(二分法 冒泡 选择 快排)
二分法: 平均时间复杂度:O(log2n) int halfFuntion(int a[], int length, int number) { int start = 0; int end = l ...
- magento搬家
将原来网站文件中的var文件中的cache和session文件删除,将media中的缓存文件删除.然后将所有文件制作成一个压缩包,以减少文件体积,方便转移. 将压缩包转移到新的服务器域名指向的文件夹, ...
- 原生js封装Ajax
[转载请注明出处] 1 /** * @fileoverview ajax请求公用组件 * @author Limo * @date 2015/08/07 * Native package ajax m ...
- awk sed 总结
Awk总结笔记 介绍 90年代 new awk :nawk Linux 的是gawk 我们简化awk 用法 # awk [options ] ‘scripts’ file1 file2 .... # ...
- [CC]获取ScalarField的值
//根据字段滤波void MainWindow::doActionFilterByValue() ReferenceCloud* ManualSegmentationTools::segment(Ge ...
- 几种获取IP 根据IP获取地址的方法 JS,第三方 新浪 网易 腾讯
第一种是利用纯真ip数据库,这个可以在网上找到很多,缺点是更新有点慢. 第二种是利用门户网站的接口 目前已知的有腾讯.新浪.网易.搜狐和Google提供IP地址查询API,但是找得到的只有腾讯.新浪和 ...
- php cUrl模拟登录,cookie保存到文件中
源码如下: <?php header("Content-Type:text/html;charset=utf-8"); //模拟群友通讯录手机号登录 $curl = curl ...
- Angular通过CORS实现跨域方案
以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了, ...
- Windows Phone 七、XML序列化
DataContractSerializer对象 public class Person { public int Id { get; set; } public string Name { get; ...