012vuerouter

VUEROUTER3–vue2
vuerouter4–vue3
一个html可以切换多个组件，用户体验好很多

使用：导入-全局注册（use
import vuerouter from vuerouter
Vue.use(vuerouter)

vue-router有
< router-link >
并且使用< router-view>来声明路由占位符

index.js这个的作用就是能path转到对应url时，调用对应的组件，就是我们引入的组件
就是我们占位标签的位置
我们导出为router
然后要去main导入
import routes from ‘./router/index.js’
(如果叫index.js可以不写
import routes from ‘./router’
然后去new Vue里面写入router

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性和组件的对应关系
    routes:[
        {path:'/discover',component:Discover},
        {path:'/friends',component:Friends},
        {path:'/my',component:My},
    ]
})

export default router

连接名称叫什么自己定义，只有后面对应组件就行
vue文件要保存，白點代表沒保存
但是这样写第一次进主页没有任何内容，所以我们应该重定向“/”这个路径到我们的页面；这样就每个地址都有内容；（router4好像就是默认第一个了）
{path:‘/’,redirect:“/discover”},
嵌套路由，
子路由里面也可以嵌套router-list
同时也要去router/index.js去注册路径和组件的对应关系
但是如果再通过绝对路径，不利于嵌套路由，vue支持子路由声明

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'
import TopList from '../components/TopList'
import PlayList from '../components/PlayList'
Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性和组件的对应关系
    routes:[
        {path:'/',redirect:"/discover"},
        {path:'/discover',component:Discover,
        //通过children嵌套
        children:[
            {path:"toplist",component:TopList},
            {path:"playlist",component:PlayList},
        ]
    },
        {path:'/friends',component:Friends},
        {path:'/my',component:My},
    ]
})

export default router

然而这种方法对于重复性较高的，例如一个商品一个链接就很不方便
VUE支持动态路由，把地址可变部分定义为参数项，
{path:“/product/:id”,component:Product}

通过传参获取id的值

<template>
    <div>
        <h1>商品{{ $route.params.id }}</h1>
    </div>
</template>

还可以通过定义属性的值传参

<template>
    <div>
        <h1>商品{{ id }}</h1>
    </div>
</template>
<script>
export default {
    //name:'Product',
    props:["id"]
}
</script>

{   path:'/my',
            component:My,
            children:[
                {path:":id",component:Product,props:true},
           // {path:"playlist",component:PlayList},
            ]
        },

对product定义一个参数,然后路径中就把id作为参数传递

还可以通过编程式跳转，前面都是声明式跳转

导航守卫可以控制跳转的路由规则
相当于后端的拦截器