path：路由请求的路径

component：路由匹配成功后需要渲染的组件或者页面

tag:改变组件内部渲染的元素 假设组件内部渲染的是a标签 tag="li" 那么li就会替换a

import Router from 'vue-router'

import Home from "./views/Home.vue";

import List from "./views/list.vue";

Vue.use(Router)

//路由的配置项

export default new Router({

//每一个路由的配置项,每一个路由都是一个对象

    routes: [

{

        //请求的路径 pathname

        path:"/home",

        //path路径匹配成功后渲染哪个组件/页面

        component:Home

    },

    {

        path:"/list",

        component:List

        }

    ]

})

1、<a href="#/home"></a>

2、<router-link to="/home"></router-link>

to的路径会与path进行匹配，如果匹配成功会渲染component对应的组件

组件怎样才能在页面上进行展示：

    必须依赖一个内置组件

        <router-view></router-view> //展示路径匹配成功以后相对应的组件

3、直接调用$router.push 实现携带参数的跳转

getDescribe(id){

    this.$router.push({

        path:'/describe/${id}',

    })

}

redirect：重定向   （当访问一个路径时想展示另一个路径的页面）

{

path:"/",

redirect:"/home"

}

children：路由嵌套

    children是一个数组 数组里存放对象 每一个对象都是下一级的路由的配置项 配置项的属性与routes里面的属性一样

name:命名路由 给当前路由取一个别名

children:[

    {

        name:"city",

        path:"city",

        component:City

    }

]

路由传参：
tip: 用params传参，F5强制刷新参数会被清空，用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。

路由的传参接收方式统一在this.$route里面

1、query传值接收方式

query传值?后面的参数 &进行链接 /user?name=zhangsan&age=18

传值的方式：通过?进行数据的拼接 每个字段之间用&分隔 类似与get请求的方式

接收:this.$route.query

router.js页面：

{

    name:"detail",

    path:"/detail",

    component:Detail,

}

传递参数地址页面：

        //query传值接收方式

    let {id,name} = this.$route.query;

    this.id = id;

    this.name = name;

所要跳转的路径：

1、

<div class="app">

<ul>

        <Router-link

            v-for="(item,index) in goods"

            :to="'/detail?id='+item.id+'&name='+item.goodsName"

            tag="li"

            >

        <h2>{{item.goodsName}}</h2>

</Router-link>

</ul>

<router-view></router-view>

</div>

2、

<div class="app">

<ul>

       <Router-link

            v-for="(item,index) in goods"

            :to="{name:'detail',query:{id:item.id,name:item.goodsName}}"

            tag="li"

                >

        <h2>{{item.goodsName}}</h2>

</Router-link>

</ul>

<router-view></router-view>

</div>

2、动态路径接收方式
params:参数不会显示到路径上

在路由的配置项path中，设定传递参数的属性 方式为 /:属性.....

在路由跳转的属性中 设置属性的值 方式为 /detail/0/苹果

接收：this.$route.params

router.js页面：

{

    name:"detail",

    path:"/detail/:id/:name",

    component:Detail,

}

传递参数地址页面：

    //动态路径接收方式

    let {id,name} = this.$route.params;

    this.id = id;

    this.name = name; 

所要跳转的路径：

1、

<div class="app">

<ul>

　　<Router-link

   　　v-for="(item,index) in goods"

   　　:to="'/detail/'+item.id+'/'+item.goodsName"

   　　tag="li">

　　　　<h2>{{item.goodsName}}</h2>

　　</Router-link>

</ul>

<router-view></router-view>

</div>

2、

<div class="app">

<ul>

   <Router-link

      v-for="(item,index) in goods"

      :to="{name:'detail',params:{id:item.id+'',name:item.goodsName}}"

      tag="li">

    　　<h2>{{item.goodsName}}</h2>

　　</Router-link>

</ul>

<router-view></router-view>

</div>

3、props接收方法

router.js页面：

    {

        name:"detail",

        path:"/detail/:id/:name",

        component:Detail,

        props:true,

    }

传递参数地址页面：

    props:{

        id:{

            type:String,

            default:""

    },

    name:{

        type:String,

        default:""

    }

},

query传值是非必须传值 动态路由传值是必须要传值

beforRouteEnter 路由进入之前

1、热力图

2、登陆验证

3、权限验证

4、会员 VIP验证

5、验证商品携带信息是否完整

在当前钩子函数中是访问不到this的，因为还没有进入当前组件所以this为undefined

如果需要使用this则需要在next中使用回调,回调中的第一个参数就是组件的实例

进入路由之前

props:{

    id:{

        type:String,

        default:""

    },

    name:{

        type:String,

        default:""

    }

}

beforeRouteEnter(to,from,next){

//to 到哪里去 from 从哪来 next执行下一步

document.title = to.meta.title

next((vm)=>{

console.log(vm);

});

},

beforRouteUpdate 路由更新的时候

当路由发生了改变，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时

我们就需要用到了beforRouteUpdate

props:{

    id:{

        type:String,

        default:""

    },

    name:{

        type:String,

        default:""

    }

}

beforeRouteUpdate (to,from,next) {

//当路由发生改变的时候

   console.log("执行了")

    this.id = to.params.id;

    this.name = to.params.name;

    next();

}

beforRouteLeave 路由离开的时候

1、信息没有填写完成

2、答题系统

3、支付

4、退出登陆

当路由离开的时候

props:{

    id:{

        type:String,

        default:""

    },

    name:{

        type:String,

        default:""

    }

}

beforeRouteLeave(to,from,next){

    var flag = window.confirm("您确定要离开吗?");

        if(flag){

            next();

    }

}