VUE-路由的用法

路由vue-router的基本用法

 

导入路由

import VueRouter from 'vue-router';

加载路由插件

Vue.use(VueRouter)

 

 

 

 

路由数据

//路由配置
const Routers = [
  {
    path:'/index',
    meta: {
      title: '首页'
    },
    component:(resolve) => require(['./views/index.vue'],resolve)
  },{
    path:'/about',
    meta: {
      title: '关于'
    },
    component:(resolve) => require(['./views/about.vue'],resolve)
  },{
    path:'/user/:id',
    meta: {
      title: '个人主页'
    },
    component:(resolve) => require(['./views/user.vue'],resolve)
  },{
    path: '*',
    redirect:'/index'
  }
];

 

路由配置

const RouterConfig = {
  //使用html5的history路由模式
  mode: 'history',
  routes: Routers
};
const router = new VueRouter(RouterConfig);
router.beforeEach((to,from,next) => {
  window.document.title = to.meta.title;
  next();
});

router.afterEach((to,from,next) => {
  window.scrollTo(0,0); //回到顶部
});

说明：

    1）to:即将要进入的目标的路由对象；
    2）from:当前导航即将要离开的路由对象；
    3）next:调用该方法后，才能进入下一个钩子；

 

 

next()的一些用法

next()方法还可以设置参数，比如下面的场景；
某些页面需要校验是否登录，如果登录了就可以访问，否则转到登录页。这里我们通过localStorage来简易判断是否登录，如下：

next()的参数设置为false时，可以取消导航，设置为具体的路径可以导航到指定的页面。正确的使用好导航钩子可以方便实现一些全局的功能，而且便于维护；

 

 

在Vue中配置router对象

new Vue({
  el: '#app',
  router:router,
  store: store,
  render: h => {
    return h(App)
  }
  // render: h => h(App)
});

 

 

路由跳转并传递参数

<template>
    <div>
      <H1>介绍页</H1>
      <button @click="handleRouter">跳转到 user</button>
    </div>
</template>

<script>
    export default {
      methods: {
        handleRouter(){
          //路由跳转
          this.$router.push('/user/123');
        }
      }
    }
</script>

<style scoped>

</style>

 

 

 

接受路由传递参数

<template>
    <!--从路由中获取传过来的参数-->
    <div>{{ $route.params.id }}</div>
</template>

<script>
    export default {
        //组件HTML都渲染完后执行，可以操作dom
        mounted(){
          console.log(this.$route);
        }
    }
</script>

<style scoped>

</style>