动态路由的用法

• 动态组件

<component :is="comName"></component>

• 在data中声明comName
• 监听链接的哈希值是否发生变化

created(){
    window.onhashchange=()=>{
        console.log(location.hash)
    }
}

以上做法太费时间，可以用vue-router插件

1.下载安装vue-router

2.在src下创建router文件夹，并创建index.js的文件

//1.引入Vue包和VueRouter的包

import Vue from 'vue'
import VueRouter  from 'vue-router'

//2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

//3.创建路由的实力对象
const router = new VueRouter()

//4.向外共享路由的实例对象
export default router

3.在main.js引入router

import router from '@/router'

4.在App.vue中用router-view占位

<router-view></router-view>

5.在router/index.js中注册路由-----记得引入组件

const router = new VueRouter({
    routers:[
        {path:'/home',component:Home},
        {path:'/movie',component:Home},
    ]
})

6.在App.vue中用<router-link to="/home">首页<router-link> 替代a标签，地址不用带‘#’

7.子路由规则

const router = new VueRouter({
    routers:[
        {path:'/home',component:Home},
        {path:'/movie',component:Home,children:[
            {path:'/child1',component:childcom},
        ]},
        
    ]
})

8.path为空就是默认的

9.动态路由传参

父组件

<router-link to="/home">首页</router-link>
<router-link to="/movie/1">雷神</router-link>
<router-link to="/movie/2">复联</router-link>
<router-link to="/movie/3">洛基</router-link>

router/index.js中注册路由将props设置true

{path:'/movie/:mid',component:Movie,props:true}

子组件的props中，设置参数,就可拿到路由上面的参数并使用

props:[mid]