vue路由

Vue实战：浅谈如何使用VueRouter Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。 先看一个项目目录结构： 先看入口文件 main.js： 其中： 通过 import Vue from 'vue' 引入Vue 通过 import VueRouter from 'vue-router' 引入Vue Router 通过 import routes from './routes' 引入路由列表 通过 Vue.use（VueRouter） 调用 Vue Router 通过 const router = new VueRouter({//mode:'history', routes, }) 创建 router 实例，然后传 routes 配置 通过 new Vue({router}).$mount('#app') 创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。 this.$router.push({ name: 'Describe', params: { id: id } }) 对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示 { path: '/describe', name: 'Describe', component: Describe } 子组件中: 这样来获取参数 this.$route.params.id 父组件：使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？ this.$router.push({ path: '/describe', query: { id: id } }) 对应路由配置： { path: '/describe', name: 'Describe', component: Describe } 对应子组件: 这样来获取参数 this.$route.query.id <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link> 子路由组件通过 this.$route.query.num 来显示传递过来的参数 <h3>{

在 Vue 中手动实现一个 vue-router 单页面应用 router 路由实现原理 1. hash 1.1 hash 实现路由的原理 1.2 hash 实现路由的核心步骤 1.3 hash 实现路由的完整代码 2. history 2.1 history 实现路由的原理 1.2 history 实现路由的核心步骤 1.3 history 实现路由的完整代码 本文要点： 了解单页面应用 router 路由的原理。 通过实战手动实现一个 vue-router 加深单页面路由的理解。 单页面应用 router 路由实现原理 单页面应用可通过 hash 和 history 两种方式实现路由。实现路由要思考两个问题。第一、如何获取当前路径；第二、如何监听当前路径变化。 1. hash hash 的方式即浏览器地址栏中含有 # 标志，该标志后面的部分即为 hash 值。示例： http://localhost:8080/#/index 1.1 hash 实现路由的原理 地址栏中 # 后面的值即为 hash 值。该 hash 值通常为路径 path，可通过 location.hash 获取当前路径。 监听当前路径变化的方法为 onhashchange 。 1.2 hash 实现路由的核心步骤 通过 hash 方式在 Vue 中实现一个简易路由，核心步骤如下： 获取路由参数 options；

方法一：通过 watch 1.1 监听,当路由发生变化的时候执行 watch: { $route(to, from) { console.log(to.path); } }, 1.2 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal) { console.log(val); }, // 深度观察监听 deep: true } }, 1.3 监听,当路由发生变化的时候执行 watch: { $route: "getPath" }, methods: { getPath() { console.log(this.$route.path); } }, 方法二：：key是用来阻止“复用”的。 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话) <router-view :key="key"></router-view> 使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。 computed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new

Vue-Router 1. 认识路由 路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表, 决定了数据包的指向。 1.1后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。这种情况就是 后端渲染 ，也叫做服务端渲染。 但是, 一个网站服务器如何处理呢? 一个页面有自己对应的, 这么多页面网址, 也就是URL。 URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理。 Controller进行各种处理, ，终生成HTML或者数据, 返回给前端。 上面这种操作，就是 后端路由 ，也就是后端处理URL和页面之间的映射关系。 浏览器 服务器 http://www.taobao.com 1. 解析url 2. 将url对应的网页内容传给浏览器 http://www.taobao.com/nanzhaung 1. 解析url 2. 将url对应的网页内容传给浏览器 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端。 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。 但后端路由也有很大的缺点：

当打包构建应用时，javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合Vue的异步组件和webpack的code splitting feature,轻松实现路由组件的懒加载。 我们要做的就是把路由对应的组件定义成异步组件： const Foo = resolve => { // require.ensure 是webpack的特殊语法，用来设置code-split point // 代码分块 require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) } 还有另外一种代码分块的语法，使用AMD风格的require,更为简单： const Foo = resolve => require(['./Foo.vue'], resolve) 只是引入模块的方式由原来的 import Foo from './Foo' 改变成了如上的方式，这样就可以根据不同路由来加载不同的模块了，不需要改变任何路由配置，跟之前一样使用Foo: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

7.路由vue-router 7.1.场景模拟 现在我们来实现这样一个功能： 一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换： 7.1.1.编写父组件 为了让接下来的功能比较清晰，我们先新建一个文件夹：src 然后新建一个HTML文件，作为入口：index.html 然后编写页面的基本结构： < div id = " app " > < span > 登录 </ span > < span > 注册 </ span > < hr /> < div > 登录页/注册页 </ div > </ div > < script src = " ../node_modules/vue/dist/vue.js " > </ script > < script type = " text/javascript " > var vm = new Vue ( { el : "#app" } ) </ script > 样式： 7.1.2.编写登录及注册组件 接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js： 编写组件，这里我们只写模板，不写功能。 login.js内容如下： const loginForm = { template : '\ <div>\

配置路由需要引入 vue-router < div id = "app" > // a标签使 hash跳转 必须前面加一个#标记 < a href = "#/login" > 登录 < / a > < a href = "#/register" > 注册 < / a > //a标签的简写形式 < router - link to = "/login" tag = "span" > 登录 < / router - link > < router - link to = "/register" > 注册 < / router - link > // 这是 vue-router 提供的元素，我们可以把 router-view 认为是一个占位符 // 匹配到的路由，会展示到 router-view 中去 < router - view > < / router - view > < / div > < script src = "../js/vue.min.js" > < / script > //配置路由需要引入vue-router < script src = "https://unpkg.com/vue-router/dist/vue-router.js" > < / script > var login = { template : '<h1>login</h1>' } ; var

用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码如下： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: resolve => require(['components/Hello.vue'], resolve) }, { path: '/about', component: resolve => require(['components/About.vue'], resolve) } ] }) 来源： https://www.cnblogs.com/HtmlCss3/p/6410521.html

Vue路由大致分为6个步骤： 1.引用vue-router <script src="js/vue-router.js"></script> 2.安装插件 Vue.use(VueRouter); 3.创建一个路由对象 var router = new VueRouter({ //这里面配置路由对象 }); 4.配置路由对象 name: 路由名称，在 router-link 只需要通过 :to={name:'变量名'} 指定跳转的地址； path: 跳转的路径，对应路径中#/后面的那串字符，如下图所示： component: 指定要更换的组件 routes:[ {name:'***',path:'***',component:***} ] 5.将配置好的路由关联到vue实例中 router:router, 6.指定路由改变局部的位置 具体实例： <!DOCTYPE html> <html lang="en"> <head> <title>router-link</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script src="https://cdn