Vue.js（六）

路由（用 Vue.js + Vue Router 创建单页应用）

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

url 地址和真实的资源之间的对应关系，就是路由。


路由分为前端路由和后端路由：
	1) 后端路由是由服务器端进行实现，并完成资源的分发
	2) 前端路由是依靠hash值(锚链接)的变化进行实现 


前端路由主要做的事情就是监听事件并分发执行事件处理函数。
核心实现依靠一个事件，即监听hash值变化的事件：

	window.onhashchange = function(){
  	  //location.hash可以获取到最新的hash值
   	 location.hash
	}

基本使用

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>


// 1. 定义 (路由) 组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }


// 2. 定义路由（每个路由应该映射一个组件）
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]


// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes
})


或者：
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/User'},
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })


// 4. 创建和挂载根实例。
const app = new Vue({
  router
}).$mount('#app')

路由嵌套

      const Register = {
        template: 
        `<div>
          <h1>Register 组件</h1>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          // children 数组表示子路由规则
          { 
          	path: '/register', component: Register, 
          		children: [
            		{ path: '/register/tab1', component: Tab1 },
            		{ path: '/register/tab2', component: Tab2 }
          		]
          }
        ]
      })

路由重定向

{path: '/', redirect: '/user'}

动态路由匹配

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


1.
const User = {
	template: '<h1>{{$route.params.id}}</h1>'
}

routes: [
	{ path: '/user/:id', component: User },
]


2.
const User = {
	props: ['id'],
	template: '<h1>{{id}}</h1>'
}

{ path: '/user/:id', component: User, props: true }


3. 此方法无法接收到id值（/user/:id无法接收）
const User = {
	props: ['id', 'name', 'age'],
	template: '<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>'
}

{ path: '/user/:id', component: User, props: { name: 'lisi', age: 20 } }


4.
const User = {
	props: ['id', 'name', 'age'],
	template: '<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>'
}

{
	path: '/user/:id',
	component: User,
	props: route => ({ name: 'zs', age: 20, id: route.params.id })
}

命名路由

<router-link :to="{ name: 'user', params: {id: 3} }">User</router-link>	//params传递参数

const User = {
	props: ['id', 'name', 'age'],
	template: '<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>'
}

routes: [
	{ path: '/', redirect: '/user' },
	{
		// 命名路由
		name: 'user',
		path: '/user/:id',
		component: User,
		props: route => ({ name: 'zs', age: 20, id: route.params.id })
	}
]

编程式导航

声明式导航：通过点击链接实现导航的方式

编程式导航：通过调用JavaScript形式的API实现导航的方式

常用的编程式导航 API 如下：
	this.$router.push('hash地址')
	this.$router.go(n)


编程式导航 router.push() 方法的参数规则：
	// 字符串(路径名称)
	router.push('/home')
	// 对象
	router.push({ path: '/home' })
	// 命名的路由(传递参数)
	router.push({ name: '/user', params: { userId: 123 }})
	// 带查询参数，变成 /register?name=lisi
	router.push({ path: '/register', query: { name: 'lisi' }})


      const User = {
        props: ['id', 'name', 'age'],

        template: 
        	`<div>
         	 	<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>
         	 	<button @click="goRegister">跳转到注册页面</button>
       		 </div>`,

        methods: {
          goRegister() {
            this.$router.push('/register')
          }
        },
      }


      const Register = {
        template: 
        	`<div>
         		 <h1>Register 组件</h1>
          		 <button @click="goBack">后退</button>
        	 </div>`,

        methods: {
          goBack() {
            this.$router.go(-1)
          }
        }
      }