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,发布后, ...
随机推荐
- Source Insight 3.X utf8支持插件震撼发布
继上次SI多标签插件之后,因为公司内部编码改为utf8编码,因此特意做了这个Source Insight 3.X utf8插件. 下载地址:[点我] 安装说明: 解压msimg32.dll sihoo ...
- WordPress基础:自定义菜单
需要自定义一个菜单,可以访问后台->外观->菜单
- 回文字符串的判断!关于strlen(char * str)函数
#include <stdio.h> #include <string.h> int ishuiw(char * p); int main() { ;//true-false接 ...
- 解决警告“ld: warning: directory not found for option
因为已经把文件编译到项目中,删除的话会出现找不到文件或文件夹的警告. 1选择工程, 编译的 (targets) 2选择 Build Settings 菜单 3查找 Library Search Pat ...
- Android APP压力测试-Monkey
压力测试-Monkey学习 Monkey测试特点 什么是Monkey test? 如其名,像猴子一样,虽然什么都不懂,但是可以乱点一通,可以理解为压力测试.在规定的时间或次数范围内做任何随机的操作,随 ...
- WP8.1 状态栏隐藏
StatusBar statusbar = StatusBar.GetForCurrentView(); await statusbar.HideAsync();
- LeetCode Find the Celebrity
原题链接在这里:https://leetcode.com/problems/find-the-celebrity/ 题目: Suppose you are at a party with n peop ...
- 微服务之Swagger
Swagger使用 1. Swagger UI 按以下步骤配置,项目启动后访问:http://localhost:8080/swagger-ui.html 1.1 添加依赖 <dependenc ...
- DNS压力测试工具dnsperf简介
dnsperf是我最近写的一个开源的DNS压力测试工具,用户可以用它来对DNS服务器或者Local DNS做压力测试.dnsperf目前的实现是单进程模式,通过epoll非阻塞地处理网络事件. dns ...
- XML的一些事
XML文件的优缺点: 使用XML作为传输格式的优势: 1. 格式统一, 符合标准 2. 容易与其他系统进行远程交互, 数据共享比较方便 3.调用将 XML 用作传输的现有服务. 4.使用 XSLT 可 ...