vue + vue-router + vue-resource 基于vue-cli脚手架 ---笔记

ps: 基于Vue2.0 npm的vue-cli脚手架

在vue-router中路由路径的简写代码：

点击打开项目 > build > webpack.base.conf.js 找到webpack.base.conf.js文件修改即可
值得注意的是，修改了alias下的引用路径后，要重启项目(npm run dev)，否则将会报错

function resolve (dir) {return path.join(__dirname, '..', dir)
}module.exports = {entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'components': resolve('src/components'),}},

下面代码中即用到简写的路由路径：components

ps: 值得注意的是1.0中路由默认展现第一个组件的go('/goods')方法，在2.0中不行，可用 导航式编程 router.push('/goods')
或者---在路由配置项中进行设置，用 重定向 的方法
如下 routes 设置项--> {path: '/', redirect: goods},即默认进来 '/' 未加路由地址时，显示 goods 这个组件

导航式编程方法：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
const routes = [ {path: '/', redirect: goods, name:"商品"},{path: '/goods', component: goods, name: "商品"},{path: '/ratings', component: ratings, name: "评论"},{path: '/seller', component: seller, name: "商家"}
]
export default new VueRouter({routes: routes
})

重定向方法：　　

import Vue from 'vue';
import router from './router';
import App from './App';
router.afterEach((to, from, next) => {document.title = to.name;
})
router.push('/goods')
/* eslint-disable no-new */
new Vue({el: '#app',router,template: '<App/>',components: {App}
});

基于vue-router路由切换时，动态显示组件或页面模块的标题方法：

const routes = [{path: '/', redirect: goods, name:"商品"},{path: '/goods', component: goods, name: "商品"},{path: '/ratings', component: ratings, name: "评论"},{path: '/seller', component: seller, name: "商家"}
]ps: 其中name值，就是上面代码中路由配置的组件的 name 值

router.afterEach((to, from, next) => {document.title = to.name;
})

参考地址 https://juejin.im/entry/585377cf8e450a006c53aef1

转载于:https://www.cnblogs.com/MrZouJian/p/6560898.html

vue + vue-router + vue-resource 基于vue-cli脚手架 ---笔记相关推荐

vue 音乐盒app_VBox 一款基于vue开发的音乐盒序章
自己基于vue写了一个 Mplayer, 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
基于vue前端聊天插件_基于Vue聊天的实现
基于vue前端聊天插件基本视频聊天 (basic-vue-chat) Easy to use VueJS chat. 易于使用的VueJS聊天. 安装 (Installation) You can ...
vue时间天气插件_基于vue.js 2.0的百度天气应用 – vue-weather
vue-weather 基于vue.js 2.0的百度天气应用. 说明初学vue,在看完一个简单的视频教程和走两遍完官方文档之后仍然感觉云里雾里,知其然不知其所以然(虽然现在好了点).请教了高手之后 ...
vue拆分js文件_基于Vue+Webpack拆分路由文件实现管理
事实是,如果你的项目不是特别大,一般是用不着分拆的.如果项目大了,那就需要考虑分拆路由了.其实,这个操作并不复杂. 当我们用 vue-cli 工具,创建一个新的 vue 项目时,就已经给大家新建好了一 ...
vue连线插件_基于Vue的任务节点图绘制插件（vue-task-node）
简介: vue-task-node 是一个基于Vue的任务节点图绘制插件(vue-task-node is a Vue based task node mapping plug-in) 此篇博客会随插 ...
vue.js动态计时器_基于Vue.js的Pomodoro技术计时器
vue.js动态计时器番茄 (pomodoro) Timer for Pomodoro Technique built on Vue.js 2.0 with PWA 基于PWA的Vue.js 2.0 ...
vue连线插件_基于vue的网页标尺辅助线工具(vue-ruler-tool)
原文首发于我的博客,欢迎点击查看获得更好的阅读体验~ 标尺辅助线.gif vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件,觉得在现在的一个项目中能用的上, ...
vue菜单点击html,基于vue.js实现侧边菜单栏
侧边菜单栏应该是很多项目里必不可少的自己手写了一个下面是效果图下面就说一下实现的过程还是比较简单的首先导入一下需要的文件接下来就是我的html 主页系统用户管理权限设置操作日志设 ...

vue + vue-router + vue-resource 基于vue-cli脚手架 ---笔记

vue + vue-router + vue-resource 基于vue-cli脚手架 ---笔记相关推荐

最新文章

热门文章