vue-router

本文的学习来自技术胖大神的教程： https://jspang.com/ 这里的路由是指SPA （单页应用）的路径管理器。 vue-router 就是 WebApp 的链接路径管理系统。 为什么不能直接用 <a></a> 标签编写链接 呢 ？因为用 Vue做 的都是单页应用，相当于只有一个主的 index.html 页面，所以写 <a></a>标签是不起作用的，必须用vue-router来进行管理。 1 安装并写一个简单的路由 在项目目录下执行： npm install vue-router --save-dev 因为当安装 vue-cli 环境时，默认安装好了路由，就不用再重复安装了。 1.1 解读 router/index.js 文件 （为代码加了注释）： import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import HelloWorld from '@/components/HelloWorld' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 作者 | Jeskson 来源 | 达达前端小酒馆 Vue简介 Vue框架，框架的作者，尤雨溪，组件化，快速开发的特点。 生命周期 beforeCreate：组件刚刚被创建 created：组件创建完成 生成 beforeMount：挂载之前 mounted：挂载之后 成熟 beforeDestory：组件销毁前调用 destoryed：组件销毁后调用 老年 安装： 全局安装：vue-cli npm install --global vue-cli 创建一个基于webpack模板的新项目 vue init webpack my-project 安装依赖包： cd my-project npm install npm run dev @代表src目录： import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'hello', component: Hello } ] }) 生命周期调用： beforeCreate created

什么是路由 之前有个小伙伴面试被问到： 面试官：不用vue能不能写单页面应用？ 答：用angular啊（咳咳，开个玩笑），答案确实是可以的，原生js中有个事件叫做onhashchange，可以在window对象上监听这个事件，通过触发事件动态加载js，实现了没有向服务器发起请求却能通过url和页面关联，这就是所谓的前端路由了。 路由反映了url和页面的映射关系 vue路由 言归正传，说说vue-router做路由。 先来个简单的demo: npm i vue-router --save-dev 先通过js手动引入vue-router 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 import Vue from 'vue'import Router from './router5.js'// router.js中代码import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const home = { template:` <div> <h1>首页路由</h1> </div> `}const details = { template:`<h1>详情路由</h1>`}const