vue --- > [全家桶]vue-router

1. Vue - router

• Vue Router是 Vue.js 官方的路由管理器
• 它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发

Vue Router包含的功能有:

• 支持HTML5历史模式或hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

<div id="app">
    <router-link to='/user'>User</router-link>
    <router-link to='/register'>Register</router-link>
    <!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置-->
    <router-view></router-view>
</div>
<script>
    const User={
        template: `<h1>User</h1>`
    }
    const Register={
        template: `<h1>Register</h1>`
    }
    const router = new VueRouter({
        routes:[
            {path: '/user',component: User},
            {path: '/register',component: Register}
        ]
    })
    const vm = new Vue({
        el:'#app',
        data: {},
        router
    })
</script>

1.1 路由重定向

var router = new VueRouter({
    routes:[
        { path: '/', redirect: '/user'},
        { path: '/user', component: User},
        { path: '/register', component: Register}
    ]
})

1.2 嵌套路由

const router = new VueRouter({
    routes:[
        { path: '/user', component: User },
        { path: '/register',
          component: Register,
          children: [
              { path: '/register/tab1', component: Tab1 },
              { path: '/register/tab2', component: Tab2}
          ]
        }
    ]
})

1.3 动态路由匹配

• 以下路由规则该如何匹配

<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

• 进行动态路由匹配

var router = new VueRouter({
    routes: [
        {path: '/user/:id', component: User}
    ]
})
// 匹配得到的参数存在 $route.params 中
const User = {
    template: '<div>User {{ $route.params.id }}</div>'
}

1.4 路由组件传递参数

1. props的值为布尔类型

const router = new VueRouter({
    routes:[
        { path: '/user/:id', component: User, props: true}
    ]
})
const User = {
    props: ['id'],
    template: `<div>用户ID: {{ id }}</div>`
}

2. props的值为对象类型

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User, props: { uname: 'lisi', age: 12}}
    ]
})
const User = {
    props: ['uname', 'age'],
    template: '<div>用户信息: {{ uname + '---' + age}}</div>'
}

3. props的值为函数类型

const router = new VueRouter({
    routes:[
        { path: '/user/:id', component: User, props: route => ({ uname: 'zs', age:20, id: route.params.id  })}
    ]
})
const User = {
    props: ['uname', 'age', 'id'],
    template: '<div>用户信息: {{ uname + '---' + age + '---' +id}}</div>'
}

1.5 命名路由

• 未来更加方便的表示路由的路径,可以给路由规则起一个别名,即为"命名路由"

<router-link :to="{ name: 'user', params: {id: 123}}">User</router-link>
<script>
    const router = new VueRouter({
        routes:[
            { path: '/user/:id', name: 'user', component: User}
        ]
	})
    const User = {
        template: `
		<div>
			<h1> User -- {{$route.parmas.id}} </h1>
    	</div>`
    }
</script>

1.6 编程式导航

• 声明式导航: 通过点击链接实现导航的方式,叫做声明式导航
  • 普通网页: 点击<a></a>
  • vue: <router-link></router-link>
• 编程式导航: 通过JavaScript形式中的API实现导航的方式
  • 普通网页中: location.href
  • Vue:
    • this.$router.push(‘hash地址’)
    • this.$router.go(n) - 前进后退

// this.$router.push
const User = {
  template: `
    <div>
      <h1>User {{$route.params.id}} 组件</h1>
      <button @click="goRegister">跳转到注册页面</button>
    </div>
  `,
  methods:{
    goRegister(){
      this.$router.push('/register')
    }
  }
}

// this.$router.go
const Register = {
  template: `
  <div>
    <h1>Register</h1>
    <button @click="goBack">后退</button>
  </div>
  `,
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}

• router.push()方法的参数规则

// 字符串(路径名称)
router.push('/home')

// 对象
router.push({ path: '/home'})

// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123}})

// 带查询参数,变成 /register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi'}})