VueRouter路由总结

// 2 创建路由实例对象 -router

// import VueRouter from './vue-router';

 

// 3 配置路由规则

let router=new VueRouter({routes:[]});

// router.addRoutes([{path:'/',redirect:{name:'movie'}},{name:'movie',path:'/movie',component:Movie},{name:'notfound',path:'*',component:NotFound}])；

 

// // 4 与Vue产生关联(安装插件)

// Vue.use(VueRouter);

 

// 5 启动Vue是，将路由实例对象交给vue实例配置

// new Vue({

//   el:'#app',

//   render:c=>c(App),

//   router:router

// })

 

// 6 在app.js中留坑

// {/* <router-view></router-view> */}

 

// 参数 

// 1 去哪里 2 导航 3 去了干嘛

query：

// <router-link :to="{name:'move',query:{id:1} }" ></router-link>

// + {name:'movie',path:'/movie',component:Movie};

// + this.$route.query.id;  取得参数id的值

// to中的值，key都不加单引号，value如果是字符串 就加引号

 

params：

// <router-link :to="{name:'movie',params:{id:1}}" ></router-link>

// {name:'movie',path:'/movie/:id',component:Movie}

//  this.$route.params.id；

 

// 嵌套路由

// router-view包含 router-view

// 路由则要children

// 好处:增加了单页面的灵活性，用单页应用框架开发多页应用场景

// 列如

    // 音乐页面   电影页面

    //  --欧美音乐

    //  --日韩音乐

// 路由守卫

// router.beforeEach((to,from,next)=>{});