vue中router路由的使用

详情请看

华灯初上lovl的博客

慕容小凡的博客

 

想动态绑定router

则应该是

<router-link :to="'/one/'+type">跳转到one</router-link>使用字符串连接而不是{{type}}来绑定

 在router.js中写入

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import one from '@/components/one'
import two from '@/components/two'
import a from '@/components/sub/a'
Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'Hello',
        component: Hello
    }, {
        path: '/one/:type',
        name: 'one',
        component: one
    }, {
        path: '/two/:userName/:id/:loc',//后面是参数，在相应组件中使用    this.$route.params.xxx 来获取
        name: 'two',
        component: two,
        children: [{                 //这里是路由的嵌套
            path: '/two/a',            
            name: 'a',
            component: a
        }]
    }]
})

在相应的页面中写入：

<template>
  <div class="hello">
      <router-link :to="'/one/'+type">跳转到one</router-link>
      <router-link to="/two/feng/12/luzhou">跳转到two</router-link>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      type:"les"
    }
  },
  
}
</script>

<style scoped>

</style>

即可跳转到相应的页面

导航的钩子：

全局的导航钩子

const router = new Router({...})
 // beforeEach 全局的导航钩子   即为只要链接导航，都将进入此钩子函数
router.beforeEach((to, from, next) =>{
    console.log(to)  //即将要进入的目标 路由对象
    
    console.log(from)  //当前导航正要离开的路由
    
    next() //确保要调用 next 方法，否则钩子就不会被 resolved
})

组件内的导航钩子：

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }