[转]vue router基本使用

第一步:安装 cnpm install vue-router --save  

路由配置基本语法

 

router下index.js引入

import Vue from "vue";
import Router from "vue-router";

import HelloWorld from "@/components/HelloWorld";
按需引入  底下会写到懒加载路由

export default new Router({
  routers: [{
    path: "router",
    component: '',
    meta: {}
    children: [{
        path: 'router1',
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]
  }]
})

在main.js中

import router from './router' //引入

//使用
new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

 

正式入代码环节~

 

组件:

 

<template>
  <div class="router">
    <h3>路由基本使用</h3>
  </div>
</template>

<script>
export default {
  name: "router",
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

 

路由index.js:

 

import Vue from "vue";
import Router from "vue-router";

//组件
import router from "@/components/router";


Vue.use(Router);
export default new Router({
  routes: [{
    path: "/router",
    component: router,
  }]
});

 

路由的跳转 

 

使用标签router-link 通过to绑定到上面

 

<router-link to="/lifeCycle">生命周期</router-link>   直接复制
<router-link :to="vuex">vuex</router-link>           给变量 

data() {
    return {
      vuex: "/vuex",
    };
  }

 

定义子路由

 

<router-link to="/router/router1">子路由1周期</router-link>
<router-link to="/router2">子路由2img</router-link>
<router-view></router-view>

 

routes: [{
    path: "/router",
    component: router,
    children: [{
        path: 'router1',
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]
  }]

子路由中不用加'/'  如果加了就是从根路径跳转

 

 

 

路由传递参数

 

1.路由中配置  获取: this.$route.params.id

 

直接写:
　　<router-link to="/router/router2/11111">子路由2img</router-link>      路由中一定别忘记了 path: 'router2/:名字',

 或者脚本:

<p @click="getDescribe('123')">子路由1周期</p>
　　methods: {
    getDescribe(id) {
      this.$router.push({
        path: `/router/router1/${id}`
      });
    }
  },
  mounted() {
    console.log(this.$route.params.id);
  }

 

2.params  获取: this.$route.params.id  

 

    <p @click="getDescribe('222222')">子路由1周期</p>

    methods: {
    getDescribe(id) {
      this.$router.push({
        name: "router1",
        params: {
          id: id
        }
      });
    }
  },
  mounted() {
    console.log(this.$route.params.id);
  }

可以看见 地址栏参数不显示  与query相反

 children: [{
        path: 'router1/:id',
        name: "router1",       //通过name值 params
        component: Router1
      },
      {
        path: 'router2',
        component: Router2
      }
    ]

 

3.query  获取: this.$route.query.id  

 

直接写:

　　<router-link :to="{path:'/router/router1',query:{id:'000'}}">子路由1周期</router-link>

  或者脚本:

<p @click="getDescribe('6666')">子路由1周期</p>
methods: {
　　getDescribe(id) {
      this.$router.push({
        path: "/router/router1",
        query: {
          id: id
        }
      });
    }
  }
//子组件
 mounted: function() {
    console.log(this.$route.query.id);
 }
注意看 现在的地址栏和上面两种方式不同 ?= 

 

 

 

上面例举了三种跳转传参 第一路由配置  第二params 第三query   注意获取的时候是$route   没有 r

 

下面三种跳转的方法与区别:push replace go 

 

router.go(n)
这个方法的参数是一个整数， 意思是在 history 记录中向前或者后退多少步， 类似 window.history.go(n)

methods:{
    next(){
        this.$router.go(1);  //前进
    },
    prevent(){
        this.$router.go(-1);  //后退
    }
}

 

router.push(location)
想要导航到不同的 URL， 则使用 router.push 方法。 这个方法会向 history 栈添加一个新的记录， 所以， 当用户点击浏览器后退按钮时， 则回到之前的 URL。

router.replace(location)
跟 router.push 很像， 唯一的不同就是， 它不会向 history 添加新记录， 而是替换掉当前的 history 记录。是当前一次哦~

 

 

 

路由的别名和重定向

 

别名:alias

 

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样

 

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: router,
  }]
});

 

 

 

重定向:redirect

 

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

 

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: router,
    redirect: '/watch'
  }, {
    path: "/watch",
    component: watch,

  }]
});

 

 

 

 router懒加载

 

export default new Router({
  routes: [{
    path: "/",
    alias: '/router',
    component: (resolve) => require(['@/components/router.vue'], resolve),
    children: [{
        path: 'router1/:id',
        name: "router1",
        component: Router1
      },
      {
        path: 'router2/:cy',
        component: Router2
      }
    ]
  }, {
    path: "/watch",
    component: (resolve) => require(['@/components/watch.vue'], resolve),
  }]
});

 

路由守卫钩子

 

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
　　　 next(vm => {

    　　// 通过 `vm` 访问组件实例
  　　})
 }

beforeRouteUpdate (to, from, next) { 
　　// 在当前路由改变，但是该组件被复用时调用
   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 可以访问组件实例 `this` 
　　next();
 }

beforeRouteLeave (to, from, next) { 
　　// 导航离开该组件的对应路由时调用 
　　// 可以访问组件实例 `this` 
　　next()
}

 

路由就告一段落了~~~~~~~~~~~~by~~~

---------------------
作者：love编程的小可爱
来源：CNBLOGS
原文：https://www.cnblogs.com/chen-yi-yi/p/11151941.html
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件