标签：pac 而不是 app abc local 进入 new 前端路由 pre
前端路由：在web开发中，路由是指根据url分配到对应的处理程序。
作用：通过管理url，实现url和组件的对应和通过url‘进行组件间的切换。
加载单个html页面，并在用户与应用程序交互时动态更新该页面。
安装模块：npm install vue-router --save(使用vue-cli就不用这一步)
引入模块：
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘
作为Vue的插件：Vue.use(VueRouter)
创建路由实例对象：
var router = new VueRouter({
配置参数
})
注入Vue选项参数：
new Vue({
router：router ; //根据ES6 ， 可简写为router
})
告诉路由渲染的位置：
<router-view></router-view>
举个小栗子：
step1:引入vue-router
import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
step2:将vue-router作为插件
Vue.use(VueRouter)
step3:引入组件
import App from ‘./App‘
import home from ‘@/components/home‘
step4:配置路由信息
var router = new VueRouter({ routes:[ { path:‘/‘, component:home } ] })
实际应用中，路由配置会很多，所以会把它们放在另外的文件中（router文件夹index.js文件），而不是都写在main.js里面。
step5:注入到根实例
new Vue({ el:‘#app‘, router:router, template:‘<App />‘, components:{ App } })
引入文件的时候，可以在webpack.base.config里面配置后缀名，比如说要引入.css文件，就可以找到加上resolve->extensions添加.css：extensions: [‘.js‘, ‘.vue‘, ‘.json‘, ‘.css‘]。这样引入css文件就不用谢后缀名了。另外要记住，每次更改了配置文件一定要重启。关于webpack，将在以后的文章中详细介绍。
1.http://localhost:8085/#/ 哈希模式：使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。是默认模式。
<ul class="nav">
<li>
<a href="#/home">home</a>
</li>
<li>
<a href="#/about">about</a>
</li>
<li>
<a href="#/document">document</a>
</li>
</ul>
这里如果不加 * 号就会刷新页面。 <a href="/home">home</a>，所以路径前要加上*。
2.http://localhost:8085/home不带有#号 history模式，在mode:‘history设置。写成<a href="/home">home</a>即可。但是跳转链接了。这是a标签的问题。用下面的router-view标签可以解决这个问题。
功能类似a标签，各种配置项
<router-link to=‘/home‘>home</router-link>
1.可以动态绑定，不必写死
<router-link :to=‘index‘>home</router-link>
2.可以写成对象形式，有很多配置项如path
<router-link :to=‘{path:"/about"}‘>about</router-link>
3.生成其他标签，如li：
<router-link :to=‘index‘ tag="li">
<i class="fa fa-home"></i>
<span>home</span>
</router-link>
4.激活状态会添加名为router-link-active的class，如图点击第二个li时三个li的class：
名字太长不好记，来取一个好记的代替它：
在路由配置里添加一项，将其改成is-active：
linkActiveClass:‘is-active‘
5.将点击切换设置为鼠标移入时切换：
<router-link to=‘/document‘ event=‘mouseover‘>document</router-link>
可以通过<router-view>标签来控制整体样式
<router-view class="center"></router-view>
当在地址栏输入不匹配的路径时跳转到404页面。增强用户体验
{ path:‘*‘, component:noFound }
也可以用重定向：
{ path:‘*‘, // 1.redirect:‘/home‘ // 2.lredirect:{path:‘/home‘} // 3.redirect:{name:‘Home‘} //4.如下： redirect:(to)=>{ //目标路由对象，访问的路径的路由信息 if(to.path === ‘/123‘){ return ‘/home‘ }else if(to.path === ‘/abc‘){ return ‘/document‘ }else{ return ‘/about‘ } } }
在地址栏输入index时，显示home页面：
{ path: ‘/home‘, name:‘Home‘, component: home, alias:‘/index‘ },
<router-link exact to="/" tag="li">
在about里面嵌套work,study和study并将study设为默认子路由:
{ path:‘/about‘, component:about, children:[ //子路由 { path:‘‘, //默认子路由 name:‘About‘, component:study }, { path:‘work‘, name:‘Work‘, component:work }, { path:‘hobbit‘, name:‘Hobbit‘, component:hobbit } ] }
to可以不写全路径，而是像下面这样，使用name：
<router-link exact :to="{name:‘About‘}" tag="li"><a>study</a></router-link>
<router-link :to="{name:‘Work‘}" tag="li"><a>work</a></router-link>
<router-link :to="{name:‘Hobby‘}" tag="li"><a>hobby</a></router-link>
用处：使一个路径对应多个组件的情况。在同级同时展示多个视图，而不是嵌套展示。
在document组件中同时展示slider和document两个视图。
<router-view name="slider"></router-view>
{
path:‘/document‘,
name:‘Document‘,
components:{
default:document,// 默认的，渲染到没名字的<router-view>位置
slider:slider //渲染到<router-view name="slider">位置
}
},
拉动滚动条，刷新浏览器之后依旧保持在滚动位置。这是浏览器的默认行为。
而如果点击前进后退，依旧保持在刚刚位置，就要使用到滚动行为。
scrollBehavior(to,from,savePosition){ //点击前进后退或切换导航触发
console.log(to); //要进入的目标路由对象 到哪里去
console.log(from); //离开的路由对象 从哪里来
console.log(savePosition); //记录滚动条的坐标点击前进后退时记录值
if(savePosition){
return savePosition;
}else{
return {x:0,y:0};
}
},
也可以利用hash定位。
<template>
<div>
我是document
<p id="abc">定位到这个元素</p>
</div>
</template>
<router-link to="/document#abc" tag="li">
if(to.hash){
return {
selector:to.hash
}
}
使用场景：匹配到的所有路由，全都映射到同一个组件。
路径：/user/:userId userId为动态路径参数
获取参数：路由信息对象的params
在user里包含n多个用户。
在user组件中遍历写出嵌套结构,userList是准备好的用户数据：
<router-link style="padding: 0 20px" :to="‘/user/‘ + item.id" key="index" v-for="item in userList">{{item.userName}}</router-link>
要想点击用户名就显示相应的用户信息。可以先从路径拿到id，再从id拿到用户信息。
怎么拿到id？
这里就要用到对组件的注入
通过在Vue根实例的router配置传入router实例。
$router 拿到router实例对象
$route 当前激活的路由信息对象
beforeRouteEnter() 进入组件前钩子函数
beforeRouteLeave() 离开组件前钩子函数
created(){
console.log(this.$route)
}
在浏览器打印出的route对象：
一个路由信息对象表示当前激活的路由状态信息，每次成功的导航都会产生一个新对象。
fullPatn：包含hash的完整路径
hash：当前路由的hash值
matched：当前路由嵌套路由
meta：元信息
name：当前路由的名称
params：动态路径参数就是放在这里
path：对应当前路由的路径
query：URL查询参数
所以this.$route.params.userId就可以拿到userId。
然后创建一个空对象userInfo，将来放置拿到的id对应的用户的信息，并遍历显示。
data(){
return{
userList:data,
userInfo:{}
}
},
<p>姓名：{{userInfo.userName}}</p>
<p>性别：{{userInfo.sex}}</p>
<p>年龄：{{userInfo.age}}</p>
<p>爱好：{{userInfo.hobby}}</p>
拿到对应的用户信息，并存在userInfo
created(){
let id = this.$route.params.userId;
if(id){
this.userInfo = this.userList.filter((item)=>{
return item.id == id
})[0]
}else{
userInfo = {}
}
}
此时就可以显示用户信息了。不过还需要监控路由信息对象，如果路由信息对象发生变化，就要执行created函数。因为在一个组件中操作，组件不会重新生成，所以钩子函数只会执行一次。
watch:{
$route(){
//路径发生变化，就执行这个函数
//就可以找到用户信息啦
this.getData();
}
},
created(){
//渲染这个组件会调用一次这个生命周期函数
//复用这个组价这个函数不会再次被调用了
//地址一旦发生变化，$route会生成一个新的路由信息对象
//一旦发生变化，我们就监控到并且执行这个函数
this.getData();
},
methods:{
getData(){
let id = this.$route.params.userId;
if(id){
this.userInfo = this.userList.filter((item)=>{
return item.id == id
})[0]
}else{
userInfo = {}
}
}
}
点击Ta的分享，地址栏变成这个样子--> localhost:8085/user/vip/1?info=share
可以这样：
<div class="info-list" v-if="userInfo.userName" style="font-size:16px;">
<router-link exact to="?info=follow">Ta的关注</router-link>
<router-link exact to="?info=share">Ta分享</router-link>
</div>
也可以使用query字符串传参
<router-link exact :to="{path:‘‘,query:{info:‘follow‘,a:1}}">Ta的关注</router-link>
<router-link exact :to="{path:‘‘,query:{info:‘share‘,a:1}}">Ta分享</router-link>
点击之后路径就会变成这样：http://localhost:8085/user/vip/1?info=follow&a=1
<router-link style="padding: 0 20px" :to="{path:‘/user/‘+ item.tip+‘/‘+item.id,query:{info:‘follow‘}}" key="index" v-for="item in userList">{{item.userName}}</router-link>
默认激活follow。
标签：pac 而不是 app abc local 进入 new 前端路由 pre
原文地址：http://www.cnblogs.com/PeriHe/p/7965403.html
