1.路由引入
//1.引入vue.js <script src="https://unpkg.com/vue/dist/vue.js"></script> //2.引入vue-router.js <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"></div> <script> //3 Vue.use(VueRouter); //4定义路由 var routes=[]; //5创建router实例 var router=new VueRouter({ routes:routes }); var App={ template:"<div></div>" }; //6根实例注入router new Vue({ el:"#app", router:router, template:"<App/>", components:{ App } }); </script>
2.路由使用
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"></div> <script> Vue.use(VueRouter) //1.创建路由组件 var Login={ template:"<div> login </div>" }; //2.配置组件路由 var routes=[{path:"/login",name:"login",component:Login}]; var router=new VueRouter({ routes:routes }); //3.使用 var App={ template:"<div> <router-link to="/login"></router-link> <router-link :to="{'name':'login'}"></router-link> <router-view></router-view> </div>" }; new Vue({ el:"#app", router:router, template:"<App/>", components:{ App } }); </script>
3.动态路由
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"></div> <script> Vue.use(VueRouter) var Login={ template:"<div> login </div>" }; //0.动态路由组件 var User={ template:"<div> {{ $route.params.id }} </div>", } var UserQ={ template:"<div> {{ $route.query.uid }} </div>", } //1.动态路由 var routes=[ {path:"/login",name:"login",component:Login}, {path:"/user/:id",name:"user",component:User}, {path:"/user",name:"userquery",component:UserQ} ]; var router=new VueRouter({ routes:routes }); //2.使用 var App={ template:"<div> <router-link to="/login"></router-link> <router-link :to="{'name':'login'}"></router-link> <router-link :to="{'name':'user',params:{id:1}"></router-link> <router-link :to="{'name':'userquery',query:{uid:2}"></router-link> <router-view></router-view> </div>" }; new Vue({ el:"#app", router:router, template:"<App/>", components:{ App } }); </script>
4.动态路由参数改变,不会销毁组件,会复用,意味着该组件的生命周期钩子不会再次调用
//方式1监控路由变化 var User = { template: '...', watch: { $route(to, from) { // 对路由变化作出响应... } } }; //方式2路由守卫 var UserQ={ template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }
5.路由嵌套
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"></div> <script> Vue.use(VueRouter) var Home={ template:"<div> <router-link to="/home/mv">mv</router-link> <router-link to="/home/song">song</router-link> <router-view></router-view> </div>" }; var Mv={ template:"<div> mv </div>", } var Song={ template:"<div> song </div>", } //1.动态路由 var routes=[ {path:"/home",name:"home",component:Home,children:[{path:'mv',name:"mv",component:Mv},{path:"song",name:"song",component:Song}]} ]; var router=new VueRouter({ routes:routes }); //2.使用 var App={ template:"<div> <router-link to="/home"></router-link> <router-view></router-view> </div>" }; new Vue({ el:"#app", router:router, template:"<App/>", components:{ App } }); </script>
6.全局守卫
var xxx={ template:"<div></div>", meta:{auth:true} }; var routes=[ {path:"/xxx",name:"xxx",component:xxx} ]; var router=new VueRouter({ routes:routes }); //全局守卫路由权限管理 router.beforeEach((to,from,next)=>{ console.log(to); console.log(from); if(to.meta.auth){ if(localStorage.getItem("user")){ next(); }else{ next({path:'/login'}) } } })
7.路由导航
//声明式 <router-link :to="..."> //编程式 const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
8.一个路径多个组件
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })