码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-router

时间:2017-12-07 18:52:54      阅读:2204      评论:0      收藏:0      [点我收藏+]

标签:pac   而不是   app   abc   local   进入   new   前端路由   pre   

前端路由:在web开发中,路由是指根据url分配到对应的处理程序。

vue-router

作用:通过管理url,实现url和组件的对应和通过url‘进行组件间的切换。

单页应用

加载单个html页面,并在用户与应用程序交互时动态更新该页面。

一、使用vue-router步骤:

安装模块: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,将在以后的文章中详细介绍。

下面的内容,将围绕这个小栗子展开:

技术分享图片

二、hash和history模式

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标签可以解决这个问题。

 

三、router-link

功能类似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
}

也可以用重定向:

四、重定向和别名

1.重定向

{
  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‘
    }
  }
}

2.别名

在地址栏输入index时,显示home页面:

{
  path: ‘/home‘,
  name:‘Home‘,
  component: home,
  alias:‘/index‘
},

3.精确匹配:exact

<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 = {}
        }
      }
    }

九、query字符串传参

点击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。

 

Vue-router

标签:pac   而不是   app   abc   local   进入   new   前端路由   pre   

原文地址:http://www.cnblogs.com/PeriHe/p/7965403.html

(0)
(1)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!