Vue Router

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
      }
    }
  ]
})