vue-router

路由安装

npm i vue-router -S

路由配置

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
/**
*引入相关组件Home、OrderingGuide、History、Delivery......
**/
Vue.use(Router)
export default new Router({
  routes: [
      {path:"/",name:"homeLink",component:Home,components:{
         //路由复用
        default:Home,
        "orderingGuide":OrderingGuide,
        "history":History,
        "delivery":Delivery
      }},
      {path:"/menu",name:"menuLink",component:Menu},
      {path:"/about",name:"aboutLink",component:About,redirect:"/history",children:[
          {path:'/contact',name:'contactLink',component:Contact,redirect:"/personName",children:[
          {path:'/phone',name:'phoneLink',component:Phone},
          {path:'/personName',name:'personNameLink',component:PersonName}
        ]}
      ]},
      {path:"*",redirect:"/"}
  ],
  mode:'history'
})

//index.js
import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

路由跳转

//方法一：通过to跳转
<ul class="navbar-nav">
  <li><router-link to="/" class="nav-link">主页</router-link></li>
  <li><router-link to="/menu" class="nav-link">菜单</router-link></li>
</ul>

//方法二：通过name跳转
<ul class="navbar-nav">
<li><router-link :to="{name:'homeLink'}" class="nav-link">主页</router-link></li>
<li><router-link :to="{path:'homeLink'}" class="nav-link">主页<</router-link></li>
</ul>

//方法三：动态绑定属性
<li><router-link :to="HomeLink" class="nav-link">主页</router-link></li>
data(){return {HomeLink:'/'}}

//方法四：通过按钮点击跳转
 <button @click="goToMenu" class="btn btn-suceess">Let's order!</button>
 methods:{
        goToMenu(){
           //跳转到上一次浏览的页面
           // this.$router.go(-1);
           //指定跳转的地址
           //this.$router.replace("/menu");
           //指定跳转路由的名字下
           //this.$router.replace({name:'menuLink'});
           //通过push进行跳转
           //this.$router.push('/menu');
           //this.$router.push({name:'menuLink'});
        }
}
//tag
 <li><router-link to="/" class="nav-link" tag="div">主页</router-link></li>

路由传参-param
使用params传参只能使用name进行引入
http://localhost:8080/condition/test/27

//基本配置
{path:'/users/:name/:age',name:'users',component:Users}

//方式一
<router-link to="/users/test/27">condition</router-link>
//方式二
<router-link :to="{name:'users',params:{name:'test',age:27}}">condition</router-link>
//方式三     
<mt-button size="large" type="primary" @click="goToUsers">condition</mt-button>
goToUsers:function(){
    this.$router.push({
          name:'users',
          params: {
            name:'test',
            age: '27'
          }
      })
}
console.log(this.$route.params.name); 
console.log(this.$route.params.age);

路由传参-query
query使用name来引入也可以传参，使用path也可以
http://localhost:8080/condition?name=test&age=27

//基本配置
{path:'/users',name:'users',component:Users}

//方式一
<router-link to="/users?name=test&age=27">condition</router-link>
//方式二
<router-link :to="{path:'/users',query:{name:'test',age:27}}">condition</router-link>
//方式三    
<mt-button size="large" type="primary" @click="goToUsers">condition</mt-button>
goToUsers:function(){
    this.$router.push({
          path:'/condition',
          query: {
            name:'test',
            age: '27'
          }
      })
}
console.log(this.$route.query.name); 
console.log(this.$route.query.age);

params是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容
query是拼接在url后面的参数，没有也没关系
使用a标签 和 使用router的区别

//跳转，页面会重新加载
<li><a href="/">page1</a></li>

//更新视图而不重新请求页面
<li><router-link to="/">page1</router-link></li>

全局守卫

//进入组件之前
router.beforeEach((to,from,next)=>{
  //alert("还未登录，请先登录");
  //next();
  //console.log(to);

  //判断store.gettes.isLogin===false;
  if(to.path=='/login' || to.path=='/register'){
     next();
  }else{
     alert("还未登录，请先登录");
     next("/login");
  }
});

全局后置钩子

//进入组件之后
router.afterEach((to,from)=>{
 alert("after each");
})

路由独享守卫

 {path:"/admin",name:"adminLink",component:Admin,beforeEnter:(to,from,next)=>{
        //路由独享守卫
        //alert("还未登录，请先登录");
        //next();
        //console.log(to);
        //判断store.gettes.isLogin===false;
         if(to.path=='/login' || to.path=='/register'){
           next();
         }else{
             alert("还未登录，请先登录");
             next("/login");
         }
}}

组件内守卫

<script>
export default {
    data(){
        return{
            name:"Henry"
        }
    },
     beforeRouteEnter:(to,from,next)=>{
        //alert("hello, "+this.name);
        //next();
        next(vm=>{
           alert("hello, "+vm.name);
        })
     },
     beforeRouteLeave(to,from,next){
         if(confirm("确定离开吗？")==true){
            next();
         }else{
            next(false);//取消你还
         }
     }
}
</script>

滚动行为

  mode:'history',
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    //只支持在history.pushState的浏览器中可用
  
    if(savedPosition){
      return savedPosition;
    }else{
      return { x: 0, y: 0 };
    }
  }

router
$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。

$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。