vue路由总结

基本用法及模板

【首先，安装路由的包】：npm install vue-router --save

【main.js】页面

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  /* 1、引入路由 */

/* 4、引入需要路由跳转的相关组件页面 */
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'
import List from './components/List.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   /*2、声明路由的使用 */

const router=new VueRouter({   /*5、配置路由，包括路径设置，组件设置 */
  routes:[
    {path:"/",component:Users}, 
    {path:"/mans",component:Mans},   /* /mans是定义路径名称，这里也可以定义为/pigs,/haha等*/
    {path:"/list",component:List},
    {path:"*",redirect:"/mans"}   /*当路由路径输入错误匹配不上时，默认跳转到"/mans"路径下*/
  ],
  mode:"history"   /* 此行代码可以去除路径中的# */
})

new Vue({
  el: '#app',
  router,   /* 3、在实例化对象里面注册router */
  components: { App },   /* 注意这里是根组件所在处 */
  template: '<App/>'   /* 6、前往根组件处(这里根组件是App.vue)设置路由跳转 */
})


【App.vue】页面
<template>
  <div id="app">
    <!-- 7、router-link用于跳转路由，router-link在任何子组件中均可使用。 --> 
    <p><router-link to="/">跳转到Users页面</router-link></p>
    <p><router-link to="/mans">跳转到Mans页面</router-link></p>
    <p><router-link to="/list">跳转到List页面</router-link></p> 

    <!-- 6、router-view用于展示路由,类似于react路由的this.props.children -->
      <router-view></router-view> 
    
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return {
        
      }
    },
    methods:{
      
    }
  }
</script>

<style></style>

知识点讲解

【tag="div"】
App.vue页面：
<p><router-link to="/list" tag="div" >跳转到List页面</router-link></p>   <!--tag="div"的意思是将router-link在dom中设置为以div标签呈现，原本默认router-link是a标签的-->

【动态绑定路由地址，给路由命名，第一种方式】
<template>
    <div>
        <p><router-link :to="homeLink">跳转到Home主页面</router-link></p>   /*下方在data中定义了homeLink:"/",这里便可以通过:to="homeLink"的方式动态绑定路由,以后直接改动homeLink便可改变路由*/
        <p><router-link to="/mans">跳转到Mans页面</router-link></p>
    </div>
</template>    

<script>
    export default{
        el:"Home",
        data(){
            return{
                homeLink:"/"
            }
        }
    }
</script>

【给路由命名，第二种方式】
main.js页面：
const router=new VueRouter({   
  routes:[
    {path:"/",component:Users}, 
    {path:"/mans",name:"mansLink",component:Mans},  /*给此路由命名为mansLink*/
    {path:"/list",component:List},    
    {path:"*",redirect:"/mans"} 
  ],
  mode:"history"  
})
Header.vue页面：
<template>
  <div id="header">
    <!-- 7、router-link用于跳转路由，router-link在任何子组件中均可使用。 --> 
    <p><router-link to="/">跳转到Users页面</router-link></p>
    <p><router-link :to="{name:'mansLink'}">跳转到Mans页面</router-link></p>   /*命名后路由的书写方式*/
    <p><router-link to="/list">跳转到List页面</router-link></p> 
  </div>
</template>

【设置默认匹配的路由】
const router=new VueRouter({   
  routes:[
    {path:"/",component:Users}, 
    {path:"/mans",component:Mans},  
    {path:"*",redirect:"/mans"}   /*当路由路径输入错误匹配不上时，默认跳转到"/mans"路径下*/
  ],
  mode:"history"  
})

【返回上一页，跳转指定页面】
Home.vue页面：
<template>
    <div class="home">
        <button v-on:click="goBack" >返回上一页</button>
        <button v-on:click="goPoint">跳转到指定路由：Menu<button>
    </div>
</template>

<script>
    export default{
        methods:{
            goBack:function(){
                this.$router.go(-1)  //跳转到上一次浏览的页面
            },
            goPoint:function(){    
                //this.$router.replace("/menu")   //跳转到指定的路由下
                //this.$router.replace({name:"menuLink"})  //跳转到指定的路由名字下
                //this.$router.push("/menu")   //通过push进行指定路由跳转（常用方式）
                this.$router.push({name:"menuLink"})
            }
        }
    }
</script>

一级路由，二级路由，三级路由

【main.js】页面
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  

/*一级路由*/
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'
import List from './components/lists/List.vue'

/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'

/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   

const router=new VueRouter({   
  routes:[
    {path:"/",name:"usersLink",component:Users}, 
    {path:"/mans",name:"mansLink",component:Mans},   /*一级路由*/
    {path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[   /*二级路由*/
        {path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[  /*三级路由*/
            {path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
            {path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
        ]},
        {path:"/list/listPlay",name:"playLink",component:ListPlay},
        {path:"/list/listSee",name:"seeLink",component:ListSee},
    ]},
    {path:"*",redirect:"/"}  
  ],
  mode:"history"  
})

new Vue({
  el: '#app',
  router,   
  components: { App },   
  template: '<App/>'   
})

——————————————————————

【App.vue】页面
<template>
     <div class="users">
            <router-link to="{name:'usersLink'}">用户</router-link>
            <router-link to="{name:'mansLink'}">男人装</router-link>
            <router-link to="{name:'listLink'}">列表</router-link>

            <div>
                <router-view></router-view>   /*一级路由的路由展示*/
            </div>
     </div>
</template>

【List.vue】页面
<template>
     <div class="list">
            <router-link to="{name:'foodLink'}">美食</router-link>
            <router-link to="{name:'playLink'}">娱乐</router-link>
            <router-link to="{name:'seeLink'}">观赏</router-link>

            <div>
                <router-view></router-view>   /*二级路由的路由展示*/
            </div>
     </div>
</template>

【ListFoodCake.vue】页面
<template>
     <div class="listFoodCake">
            <router-link to="{name:'cakeLink'}">蛋糕</router-link>
            <router-link to="{name:'cookieLink'}">饼干</router-link>

            <div>
                <router-view></router-view>   /*三级路由的路由展示*/
            </div>
     </div>
</template>

全局守卫&路由独享守卫

【main.js】页面
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' 

import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'
import List from './components/List.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   

const router=new VueRouter({   
  routes:[
    {path:"/",component:Users}, 
    {path:"/mans",component:Mans,beforeEnter:(to,from,next)=>{   /*beforeEnter,路由独享守卫，仅在此路由中生效，和全局守卫的区别是作用域不同*/
        if(from.path=="login" || from.path=="/register"){   
        next();
    }else{
        alert("非登陆状态，不能访问此页面！");   /
        next("/login");
    }
    }}, 
    {path:"/list",component:List},
    {path:"*",redirect:"/mans"}  
  ],
  mode:"history"   
})

/*全局守卫，示例*/
router.beforeEach((to,from,next)=>{  /*to:要进入的路由，from:你从哪一个路由离开，next:对应的函数*/
    if(to.path=="login" || to.path=="/register"){   /*判断用户是否在登录注册页面，如果是，执行next()进行下一步操作*/
        next();
    }else{
        alert("您还没登录，请先登录！");   /*如果用户在未登录或注册的情况下想点击其他页面，会弹框提醒用户登录注册，然后next()函数引导用户跳转到/login页面*/
        next("/login");
    }
})

new Vue({
  el: '#app',
  router,   
  components: { App },  
  template: '<App/>' 
})

组件内守卫

【Header.vue】页面
<script>
    export default{
        data(){
            return {
                name:"二狗子"
            }
        },
        beforeRouteEnter:(to,from,next)=>{  /*进入页面之前*/
            /*alert("Hello"+this.name)*/   /*这行代码中的thia.name是undefined,因为beforeRouteEnter在data之前执行，所以获取不到data里的数据，因此要用下面的方法*/
            next(vm=>{
                alert("Hello"+vm.name);
            })
        },
        beforeRouteLeave(to,from,next){  /*离开页面之前*/
            if(confirm("确定离开吗？")==true){
                next()
            }else{
                next(false)   /*弹框点击确定则离开此页面，弹框点击取消则不做反应*/
            }
        }
    }
</script>

路由模块单独抽离出来

在src文件夹下新建routers.js

【main.js】页面抽离路由前
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  

/*1、路由引入，抽离出去*/
/*一级路由*/
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   

/*2、路由配置，抽离出去*/
const routes=[
    {path:"/",name:"usersLink",component:Users}, 
    {path:"/mans",name:"mansLink",component:Mans},   /*一级路由*/
    {path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[   /*二级路由*/
        {path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[  /*三级路由*/
            {path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
            {path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
        ]},
        {path:"/list/listPlay",name:"playLink",component:ListPlay},
        {path:"/list/listSee",name:"seeLink",component:ListSee},
    ]},
    {path:"*",redirect:"/"}  
  ],

const router=new VueRouter({   
  routes,
  mode:"history"  
})

new Vue({
  el: '#app',
  router,   
  components: { App },   
  template: '<App/>'   
})

【main.js】页面抽离路由后
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  
import {routes} from './routers'   /*3、路由模块引入*/

Vue.config.productionTip = false 
Vue.use(VueRouter)   

const router=new VueRouter({   
  routes,
  mode:"history"  
})

new Vue({
  el: '#app',
  router,   
  components: { App },   
  template: '<App/>'   
})

【routers.js】页面
/*1、路由引入，抽离进来*/
/*一级路由*/
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'

//2、路由配置，抽离进来，3、并暴露出去*/
export const routes=[
    {path:"/",name:"usersLink",component:Users}, 
    {path:"/mans",name:"mansLink",component:Mans},   /*一级路由*/
    {path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[   /*二级路由*/
        {path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[  /*三级路由*/
            {path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
            {path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
        ]},
        {path:"/list/listPlay",name:"playLink",component:ListPlay},
        {path:"/list/listSee",name:"seeLink",component:ListSee},
    ]},
    {path:"*",redirect:"/"}  
  ],

路由复用

【Users.vue】页面
<template>
     <div class="users">
            <router-link to="{name:'usersLink'}">用户</router-link>
            <router-link to="{name:'mansLink'}">男人装</router-link>
            <router-link to="{name:'listLink'}">列表</router-link>

            <div>
                <router-view></router-view>   /*一级路由的路由展示*/
            </div>
            <div>   /*1、二级路由的路由在这里复用,为每个router-view添加对应的name，实现复用*/
                <p><router-view name="listfood"></router-view></p>
                <p><router-view name="listplay"></router-view></p>
                <p><router-view name="listsee"></router-view></p>
            </div>
     </div>
</template>

【routers.js】页面
/*一级路由*/
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'
import List from './components/lists/List.vue'
/*二级路由*/
import ListFood from './components/lists/ListFood.vue'
import ListPlay from './components/lists/ListPlay.vue'
import ListSee from './components/lists/ListSee.vue'
/*三级路由*/
import ListFoodCake from './components/lists/listfood/ListFoodCake.vue'
import ListFoodCookie from './components/lists/listfood/ListFoodCookie.vue'

export const routes=[
    /*{path:"/",name:"usersLink",component:Users}, */  /*2、更改前*/
    {path:"/",name:"usersLink",components:{   /2、更改后：component加s，添加多个组件并为这些组件命名以方便调用*/
        default:Users,  /*default，默认组件为Users*/
        "listfood":listFood,
        "listplay":listPlay,
        "listsee":listSee,
    }}, 
    {path:"/mans",name:"mansLink",component:Mans},   /*一级路由*/
    {path:"/list",name:"listLink",redirect:"/list/listPlay",component:List,children:[   /*二级路由*/
        {path:"/list/listFood",name:"foodLink",redirect:"/list/listFood/listFoodCake",component:ListFood,children:[  /*三级路由*/
            {path:"/list/listFood/listFoodCake",name:"cakeLink",component:ListFoodCake},
            {path:"/list/listFood/listFoodCookie",name:"cookieLink",component:ListFoodCookie},
        ]},
        {path:"/list/listPlay",name:"playLink",component:ListPlay},
        {path:"/list/listSee",name:"seeLink",component:ListSee},
    ]},
    {path:"*",redirect:"/"}  
  ],

页面控制滚动行为

滚动行为即通过路由导入到当前页面后，浏览器所展示的这部分是整个大页面的哪个位置。
比如一个长页面的高度有5000px,而浏览器只能展示960px高度的这一部分页面。通过控制滚动行为我们可以设置，当路由跳转过来时，我们展示给用户的是长页面的1000px到1960px这一部分。

【main.js】
const router = new VueRouter({
    routes,
    mode:"history",
    scrollBehavior(to,from,savePosition){
        return {x:0,y:1000}  /*从(0,1000)的位置开始展示页面*/
        return {selector:".subtitle"}  /*从class="subtitle"的元素开始展示页面*/
    }
})

贴一份项目中路由的代码

【src/router/index.js】页面

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)


import Index from '@/pages/index/index'  //首页
import Login from '@/pages/user/login'   //登录
import Register from '@/pages/user/register'   //注册
import GoodsSearch from '@/pages/search/goodsSearch'   //商品搜索
import NotFound from '@/pages/notFound/notFound'   //404

export default new Router({
    mode: 'history',  //去掉url中的#
    routes: [
        /* ----首页---- */
        {
            path: '/',
            name: 'Index',
            component: Index,
            meta:{title:'商城'}
        },

        /* ----登录注册---- */
        {
            path:'/user/login',
            name:'Login',
            component:Login,
            meta:{title:'登录'}
        },
        {
            path:'/user/register',
            name:'Register',
            component:Register,
            meta:{title:'注册'}
        },

        /* ----商品相关---- */
        {
            path:'/search/goodsSearch',
            name:'GoodsSearch',
            component:GoodsSearch,
            meta:{
                title:'商品搜索'
            }
        },

        /* ----404---- */
        {
            path:'/notFound',
            name:'NotFound',
            component:NotFound,
            meta:{
                title:'页面不存在'
            }
        },
        {
            path:'*',
            redirect:'/notFound',
        }
    ]
})

vue路由引申

1、路由有一个meta属性，可以给该路由挂载一些信息，设置一些自己title、显示隐藏、左右滑动的方向之类的
meta: {
      title: "HelloWorld",    //要显示的title
      show: true         //设置导航隐藏显示
}
使用的时候：this.$route.meta.show
<div v-show="this.$route.meta.show"></div>


2、动态路由，获取路由中携带的参数
{
    path:"/demo/:id",
    component:Demo,
}
获取数据this.$route.params.动态路由的名字,this.$route.params.id获取id参数


3、路由别名alias
{ 
    path: '/a', 
    component: A, 
    alias: '/b' 
}
用户访问 /b 时，url会保持为 /b ，但是路由匹配则为 /a ，
简单地说就是给 /a 起了一个外号叫做 /b ，但是本质上还是 /a