前端路由与vue-router的基本用法
一、什么是前端路由？
前端路由，即由前端来维护一个路由规则，实现由两种，一种是利用url的hash，就是常说的锚点，java通过hashChange事件来监听url的改变，IE7及一下需要使用轮询；另外一种就是HTML5的History模式，它使url看起来像普通网站那样，以’/’分割，没有#，但是页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，都指向同一个html文件，不然会出现404，因此，SPA只有一个html, 整个网站所有的内容都在这一个html里，通过Java来处理。
前端路由的优点很多，比如页面的持久性，像大部分音乐网站，你都可在播放歌曲的同事跳转到别的页面，而音乐没有中断。再比如前后端彻底分离。前端路由更多时候时结合具体的框架来使用，比如Angular的ngouter，React的ReactRouter和vue的vue-router。
二、vue-router 的基本用法
1、 在项目根目录新建一个router，安装vue-router
npm i --save vue-router
2、 在入口文件main.js里面使用Vue.use( )加载插件：
import Vue from ‘ vue ’
import VueRouter from ‘vue-router’
import App from ‘./app.vue’
3、 每个页面对应一个组件，也就是对应一个.vue文件。在router目录下创建views目录，用于存放所有页面，然后再views里面创建index.vue 和 about.vue两个文件：
// index.vue
&template&
&div&首页&/div&
&/template&
export default { }
//about.vue
&template&
&div&介绍页&/div&
&/template&
export default { }
4、 再回到main.js里，完成路由的配置
const Router = [
path: ‘/index’,
component: (resolve) =& require([‘./views/index.vue’], resolve)
path: ‘/about’,
component: (resolve) =& require([‘./views/about.vue’], resolve)
Routers里每一项的path属性就是指定当前匹配的路径，component是映射的组件，上例的写法，webpack会把每一个路由都打包为一个js文件，在请求该页面时，才去加载这个页面的js，也就是异步实现的懒加载（按需加载）。
5、 然后再main.js里面完成路由的其他配置和路由实例
const RouterConfig = {
// 使用HTML5的history模式
mode: ‘ history ’,
routers: Routers
const router = new VueRouter(RouterConfig)
el: ‘#app’,
router: router,
render: h =& {
return h(App)
6、 配置好了这些后，最后在根实例app.vue里添加一个路由视图&router-view&来挂载所有的路由组件：
&template&
&router-view&&/router-view&
&/template&
export default { }
运行网页时，&router-view&会根据当前路由动态渲染不同页面组件，网页中一些公共部分，比如顶部的导航栏，侧边导航栏，底部版权信息，这些也可以直接写在app.vue里，与&router-view&同级，路由切换时，切换的是&router-view&挂载的组件，其他内容并不会发生变化。
运行npm run dev 启动服务，然后访问localhost:8080/index和 localhost:8080/about就可以访问这两个页面了。
在路由列表里，可以在最后新加一项，当访问的路径不存在时，重定向到首页：
const Routers = [
path: ‘*’,
redirect: ‘/index’
这样，访问localhost:8080 就自动跳转到了localhost:8080/index页面了。
路由列表的path也可以带参数，比如个人主页的场景，路由一部分是固定的，一部分是动态的： /user/123456, 其中id “123456”就是动态的，但它们路由到同一个页面，在这个页面里，期望获取这个id，然后请求相关数据，在路由里可以这样配置参数：
// main.js
const Routers = [
path: ‘/user/:id’,
componet: (resolve) =& require([‘./views/user.vue’], resolve)
path: ‘*’,
redirect: ‘/index’
// 在router/views目录下，新建user.vue文件
&template&
&div&{{ $route.params.id }}&/div&
&/template&
export default {
mounted () {
console.log(this.$route.params.id)
这里的this.$route可以访问到当前路由的很多信息，可以打印出来看看都有什么，在开发中会经常用到里面的数据。
因为配置的路由是 “/user./id”, 所以直接访问localhost:8080/user会重定向到/index,需要带一个id才能到user.vue，比如locahost:8080/user/123456
三、路由跳转
1、vue-router有两种跳转页面的方式，第一种是使用内置的&router-link&组件，它会被渲染为一个a标签
// index.vue
&template&
&h1&首页&/h1&
&router-link to=”/about”&跳转到about&/router-link&
&/template&
它的用法和一般组件一样，to是一个prop指向需要跳转的路径，当然也可以使用v-bind动态的设置。
2、 &router-link&还有其他的一些prop，常用的有：
tag可以指定渲染成什么标签，比如&router-link to=”/about” tag=”li”&渲染的结果就是li标签而不是a标签
使用replace不好留下History记录，所以导航后不能用后退键返回上一个页面，如下：
&router-link to=”/about” replace&&/router-link&
当&router-link&对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，设置prop: active-class可以修改默认的名称，在做类似导航栏时，可以使用该功能高亮显示当前页面对应的导航菜单项。
四、路由的高级用法
vue-router还给我们提供了路由导航钩子beforeEach 和 afterEach，它们会在路由即将改变前和改变后触发。
导航钩子有三个参数：
to：即将要进入的目标的路由对象
from： 当前导航即将要离开的路由对象
next：调用该方法后，才能进入下一个钩子
通过这两个钩子，可以做很多提升用户体验的事情，比如一个页面很长，滚动到某个位置，在跳转到另外的页面，滚动条默认是在上一个页面停留的位置，而好的体验肯定是能返回顶部。通过钩子afterEach就可以实现：
// main.js
router.afterEach((to, from, next) =& {
window.scrollTo(0, 0)
类似的需求还有，从一个页面过渡另一个页面时，可以出现一个全局的Loading动画，等到页面加载完成后，再结束动画。
next() 方法还可以设置参数，比如下面的场景。某些页面需要校验是否登录，如果登录了就可以访问，否则就跳转到登录页。这里通过 localStorage来简易判断是否登录，示例代码如下：
router.beforeEach((to, from, nexxt) =& {
if (window.localStorage.getItem(‘token’)) {
next(‘/login’)
正确的使用导航钩子可以方便实现一些全局的功能，更多的可能需要在开发的业务逻辑中不断的探索。
以上，就是关于vue-router的主要用法，多练习即可掌握。
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点404 Not Found
The requested URL /q/7965/ was not found on this server.在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
url上如果有？后面的query可选参数，vue-router 在路由时怎样去掉？如 http://127.0.0.1:8080/?code=456789#!/index跳转时希望是： http://127.0.0.1:8080/#!/index
href.url="" 方式跳转当然可以，但体验太差
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
url包括了#号之前的所有内容/apple/apple?color=green是两个不同的url
而url据我所知不能改所以必须跳转
但是应该改请求/apple?color=green的时候，服务器直接返回302导航至/apple
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。Vue-router的API详解
时间： 20:58:49
&&&& 阅读：312
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&前面的话
　　本文将详细介绍Vue-router的API
router-link
　　&router-link& 组件支持用户在具有路由功能的应用中点击导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 &a& 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名
　　&router-link& 比起写死的 &a href="..."& 会好一些。无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动；在 HTML5 history 模式下，router-link 会拦截点击事件，让浏览器不再重新加载页面；在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写基路径了
to(required)
类型 string | Location
　　表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象
&!-- 字符串 --&
&router-link to="home"&Home&/router-link&
&!-- 渲染结果 --&
&a href="home"&Home&/a&
&!-- 使用 v-bind 的 JS 表达式 --&
&router-link v-bind:to="‘home‘"&Home&/router-link&
&!-- 不写 v-bind 也可以，就像绑定别的属性一样 --&
&router-link :to="‘home‘"&Home&/router-link&
&!-- 同上 --&
&router-link :to="{ path: ‘home‘ }"&Home&/router-link&
&!-- 命名的路由 --&
&router-link :to="{ name: ‘user‘, params: { userId: 123 }}"&User&/router-link&
&!-- 带查询参数，下面的结果为 /register?plan=private --&
&router-link :to="{ path: ‘register‘, query: { plan: ‘private‘ }}"&Register&/router-link&
类型: boolean
默认值: false
　　设置&replace&属性的话，当点击时，会调用&router.replace()&而不是&router.push()，于是导航后不会留下 history 记录
&router-link :to="{ path: ‘/abc‘}" replace&&/router-link&
类型: boolean
默认值: false
　　设置 append 属性后，则在当前（相对）路径前添加基路径。例如，从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
&router-link :to="{ path: ‘relative/path‘}" append&&/router-link&
类型: string
默认值: "a"
　　有时想要 &router-link& 渲染成某种标签，例如 &li&。 于是使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
&router-link to="/foo" tag="li"&foo&/router-link&
&!-- 渲染结果 --&
&li&foo&/li&
active-class
类型: string
默认值: "router-link-active"
　　设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置
类型: boolean
默认值: false
　　是否激活默认类名的依据是 inclusive match （全包含匹配）。 举个例子，如果当前的路径是 /a 开头的，那么 &router-link to="/a"& 也会被设置 CSS 类名
　　按照这个规则，&router-link to="/"& 将会点亮各个路由。想要链接使用 "exact 匹配模式"，则使用 exact 属性
&!-- 这个链接只会在地址为 / 的时候被激活 --&
&router-link to="/" exact&
类型: string | Array&string&
默认值: ‘click‘
　　声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组
【将"激活时的CSS类名"应用在外层元素】
　　有时候要让 "激活时的CSS类名" 应用在外层元素，而不是 &a& 标签本身，那么可以用 &router-link& 渲染外层元素，包裹着内层的原生 &a& 标签：
&router-link tag="li" to="/foo"&
&a&/foo&/a&
&/router-link&
　　在这种情况下，&a& 将作为真实的链接（它会获得正确的 href 的），而 "激活时的CSS类名" 则设置到外层的 &li&
router-view
　　&router-view& 组件是一个 functional 组件，渲染路径匹配到的视图组件。&router-view& 渲染的组件还可以内嵌自己的 &router-view&，根据嵌套路径，渲染嵌套组件
类型: string
默认值: "default"
　　如果 &router-view&设置了名称，则会渲染对应的路由配置中 components 下的相应组件
【行为表现】
　　其他属性（非 router-view 使用的属性）都直接传给渲染的组件， 很多时候，每个路由的数据都是包含在路由参数中。
　　因为它也是个组件，所以可以配合 &transition& 和 &keep-alive& 使用。如果两个结合一起用，要确保在内层使用 &keep-alive&：
&transition&
&keep-alive&
&router-view&&/router-view&
&/keep-alive&
&/transition&
路由信息对象
　　一个&route object（路由信息对象）&表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的&route&records（路由记录）
　　route object 是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。route object 出现在多个地方，包括如下
　　1、组件内的 this.$route 和 $route watcher 回调（监测变化处理）
　　2、router.match(location) 的返回值
　　3、导航钩子的参数
router.beforeEach((to, from, next) =& {
// to 和 from 都是 路由信息对象
　　4、scrollBehavior 方法的参数
const router = new VueRouter({
scrollBehavior (to, from, savedPosition) {
// to 和 from 都是 路由信息对象
$route.path
类型: string
　　字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"
$route.params
类型: Object
　　一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象
$route.query
类型: Object
　　一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user = 1，如果没有查询参数，则是个空对象
$rout.hash
类型: string
　　当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
$route.fullPath
类型: string
　　完成解析后的 URL，包含查询参数和 hash 的完整路径
$route.matched
类型: Array&RouteRecord&
　　一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）
const router = new VueRouter({
// 下面的对象就是 route record
{ path: ‘/foo‘, component: Foo,
children: [
// 这也是个 route record
{ path: ‘bar‘, component: Bar }
　　当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象（副本）
$route.name
　　当前路由的名称，如果有的话
Router构造配置
【routes】
类型: Array&RouteConfig&
　　RouteConfig&的类型定义：
declare type RouteConfig = {
component?: C
name?: // for named routes (命名路由)
components?: { [name: string]: Component }; // for named views (命名视图组件)
redirect?: string | Location | F
alias?: string | Array&string&;
children?: Array&RouteConfig&; // for nested routes (嵌套路由)
beforeEnter?: (to: Route, from: Route, next: Function) =& void;
类型: string
默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
可选值: "hash" | "history" | "abstract"
　　配置路由模式
　　1、hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器
　　2、history: 依赖 HTML5 History API 和服务器配置
　　3、abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式
类型: string
默认值: "/"
　　应用的基路径。例如，如果整个单页应用服务在&/app/&下，然后&base&就应该设为&"/app/"
【linkActiveClass】
类型: string
默认值: "router-link-active"
　　全局配置&&router-link&&的默认『激活 class 类名』
【scrollBehavior】
类型: Function
　　签名：
to: Route,
from: Route,
savedPosition?: { x: number, y: number }
) =& { x: number, y: number } | { selector: string } | ?{}
Router实例
router.app
类型: Vue instance
　　配置了 router 的 Vue 根实例
router.mode
类型: string
　　路由使用的 模式
router.currentRoute
类型: Route
　　当前路由对应的路由信息对象
router.beforeEach(guard)
router.beforeResolve(guard) (2.5.0+): 此时异步组件已经加载完成
router.afterEach(hook):增加全局的导航钩子
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
router.back()
router.forward():动态的导航到一个新 url
router.getMatchedComponents(location?)
返回目标位置或是当前路由匹配的组件数组（是数组的定义/构造类，不是实例）。通常在服务端渲染的数据预加载时
router.resolve(location, current?, append?)
解析目标位置（格式和 &router-link& 的 to prop 一样），返回包含如下属性的对象{　　location:L　　route:R　　href:}
router.addRoutes(routes)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组
router.onReady(callback)
添加一个会在第一次路由跳转完成时被调用的回调函数。此方法通常用于等待异步的导航钩子完成，比如在进行服务端渲染的时候
对组件注入
【注入的属性】
　　通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件
　　router 实例
　　当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable（不可变） 的，不过可以 watch（监测变化） 它
【允许的额外配置】
beforeRouteEnter
beforeRouteLeave
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/xiaohuochai/p/7616682.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！【router怎么获取参数的 vue】 - CSDN}