8.路由:vue-router

1.安装路由插件

步骤一：输入npm i vue-router -S

步骤二：main.js

import Vue from 'vue';
import App from "./App";
import router from "./router"; //引入src/router/index.js
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  router, //将路由对象传递给Vue实例
  components: { App },
  template: "<App/>",
});

步骤三：src/router/index.js

import Vue from "vue";
import Router from "vue-router"; //引入vue-router插件
import Home from "@/components/Home"; //引入组件
Vue.use(Router); //挂载属性
//定义路由规则
const routes = [{
    path: "/home",
    component: Home,
}];

const router = new Router({
  routes, //启动路由规则
  mode: "hash" //默认hash模式带#，history不带#
});
export default router;

步骤四：App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

 

2.路由跳转（点击后跳转到新页面）

//1.src/router/index.js
const routes = [
    {
        path: "/",
        name:'Home',
        component: Home
    },
    {
        path: "/homeHeader", //如果要在新的页面显示，就设置一个单独的路由
        name:'HomeHeader',
        component: HomeHeader
    },
]
//2.Home组件
<template>
    <div>
        <router-link to="/homeHeader">首页</router-link>
    </div>
</template>

 

3.嵌套路由（点击后在同一页面显示）

//1.src/router/index.js
const routes = [
    {
        path: "/",
        name:'Home',
        component: Home,
        children:[
            path: "/homeHeader", //如果要在同一页面显示，就设置成嵌套路由
            name:'HomeHeader',
            component: HomeHeader
        ]
    }
]
//2.Home组件
<template>
    <div>
        <router-link to="/homeHeader">首页</router-link>
        <router-view></router-view>
    </div>
</template>

 

4.动态路由（假如/list后面有很多子路由，动态路由只写一个路由就可以）

//1.src/router/index.js
const routes = [
    {
        path: "/home",
        component: Home
    },
    {
        path: "/home/:item",
        component: HomeHeader
    },
]
//2.组件
<template>
    <div>
        <router-link to="/home/one11">点击跳转</router-link>
    </div>
</template>

 

5.重定向（当/被重定向后，在路由内部路径从/切换到/home）

//1.src/router/index.js
const routes = [
    {
        path: "/",
        component: Home,
        redirect:'/home' //重定向
    }
]
//2.组件
<template>
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/home">列表</router-link>
    </div>
</template>

 

6.编程式导航（多用于操作浏览器前进与后退）

<template>
    <div>
        <button @click="change">点击跳转</button>
    </div>
</template>
<script>
    export default{
        methods:{
            change(){
                this.$router.go(-1); //返回上一个路由
                this.$router.push('/gitpath') //跳转到指定路由
            }
        }
    }
</script>

 

7.导航守卫（多用于一个页面到另一个页面，期间做登录检测、权限检查等）

//方式一：局部性写法（src/router/index.js）
const routes = [
     {
        path: "/login",
        component: Login
    }
    {
        path: "/detail",
        component: Detail,
        beforeEnter:(to,from,next)=>{
            var login=false
            if(!login){
                next('/login')
            }else{
                next()
            }
        }
    }
]
//方式二：全局性写法
this.$router.beforeEach(function(to,from,next){
    var login=false
    if(!login&&to.path=='/detail'){
        next('/login')
    }else{
        next()
    }
})

 

8.命名路由

//1.src/router/index.js
const routes = [
    {
        path: "/home",
        name:'newName',
        component: Home
    }
]
//2.组件
<template>
    <div>
        <router-link :to="{name:'newName'}">点击跳转</router-link>
        <router-view></<router-view>>
    </div>
</template>

 

9.命名视图（控制模板中哪些内容显示哪些内容不显示）

//1.src/router/index.js
const routes = [
    {
        path: "/home",
        component:{
            xianshi:{
                template:'<div>不显示</div>'
            },
            pinglun:{
                template:'<div>显示</div>'
            }
        }
    }
]
//2.组件
<template>
    <div>
        <router-view name="pingLun"></<router-view>>
    </div>
</template>

 

10.别名（当/home/detail被起别名/bieming后，显示为/home/detail路径，渲染Detail组件）

//1.src/router/index.js
const routes = [
    {
        path: "/home/detail",
        alias:'/bieming',
        component: Detail
    }
]
//2.组件
<template>
    <div>
        <router-link to="/bieming">详情</router-link>
        <router-view></<router-view>>
    </div>
</template>

 

11.路由元信息（在路由配置中，有些信息需要单独进行管理）

//1.src/router/index.js
const routes = [
    {
        path: "/detail",
        component: Detail,
        meta:{
            flag:true
        }
    }
]
this.$router.beforeEach(function(to,from,next){
    var login=false
    if(!login&&to.matched.some(function(item){
        return item.meta.flag
    })){
        next('/login')
    }else{
        next()
    }
})
//2.组件
<template>
    <div>
        <router-link to="/login">登录</router-link>
        <router-link to="/detail">详情</router-link>
        <router-view></<router-view>>
    </div>
</template>

 

12.路由组件传值（将模板与路由分离开，避免耦合在一起）

//1.src/router/index.js
const routes = [
    {
        path: "/detail/:item1",
        component: Detail, //抽离出来的组件
        props:true
    },
    {
        path: "/fuyong/:item1", //复用Detail组件
        component: Detail, 
        props:true
    },
]
//2.组件
<template>
    <div>
        <router-link to="/detail/one">第一</router-link>
        <router-link to="/detail/two">第二</router-link>
        <router-link to="/fuyong/three">第三</router-link>
        <router-view></<router-view>>
    </div>
</template>
<script>
    export default{
        props:['item1']
    }
</script>

 

13.路由过渡动效

//1.src/router/index.js
const routes = [
    {
        path: "/",
        component: Home
    },
    {
        path: "/detail",
        component: Detail
    },
]
//2.组件
<template>
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/detail">详情</router-link>
        //监测不同的路径对应不同的动画
        <transition :enter-active-class="effect1">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                effect1:''
            }
        },
        watch:{
            '$route'(to,from){
                var effectMap={
                    "/":"shake",
                    "/detail":"jello"
                }
                this.effect1=['animated',effectMap[to.path]].join(' ')
            }
        }
    }
</script>