Vue Router 入门、动态传值

路由入门

1. 安装路由 cnpm install vue-router --save-dev
2. js 配置路由
   引入路由、挂载到Vue、引入路由组件、配置组件路径、

//引入路由
import vueRouter from 'vue-router'
//挂载到vue
Vue.use(vueRouter);
//写好组件、并引入路由组件
import Home from './component/home'
//配置组件路径 router.js
let router = new vueRouter({
 //修改显示路径history,显示常规路径
  mode:"history", 
  //配置页面路由,默认显示路径是hsl路径
  routes:[		    		    
		    {//:to="{ name: 'user', params: { userId: 123 }}
				path:"/home/:id",
				 name: 'home',
				component:Home
			},
			{//(同级) 展示多个视图
//<router-view></router-view>
//<router-view name="a"></router-view>
//<router-view name="b"></router-view>			
		      path: '/',
		      components: {
		        default: Foo,
		        a: Bar,
		        b: Baz
		      },
			{// 会匹配以 `/user-` 开头的任意路径				
				path: '/user-*',
				component:User
			},
//a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样
 			{ path: '/a', component: A, alias: '/b' },
			{
		      path:"*", // 会匹配所有路径
		      redirect:"/b"//配置重定向/b
		    },			
		]
});
new Vue({
  el: '#app',
  router,  /*********/
  render: h => h(App)
})

含有通配符的路由应该放在最后。路由 { path: ‘*’ } 通常用于客户端 404 错误。使用一个通配符时，$route.params内会自动添加一个名为pathMatch 参数。
3. 路由入口出口

<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>

4. 路由
   注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route访问当前路由

export default {
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    username() {// 我们很快就会看到 `params` 是什么      
      return this.$route.params.username
    }
  }
}

动态传值路由

• 配置页面路由，动态传值获取路径参数

routes: [ // 动态路径参数 以冒号开头
	{ path:'/user/:username/post/:post_id , component:Home}
		]
mounted(){ this.$route.params; } 
// { username: 'evan', post_id: '123' }		

• 路由入口

//字符串拼接,只能一个参数
<router-link :to='/home/+id'></router-link> 
//ES6模板绑定方式	
<router-link :to='`/home/${id}/${name}`'></router-link> 

get传值路由

• 配置页面路由
  {path:'/detail/ , component:Detail} 不需要再配置path 的时候写入参数
• 路由入口

<router-link :to="{'path':'/detail',query:{'id':item.id,'name':item.name}}">{{item.name}}</router-link>

• get传值获取：对象

mounted(){ this.$route.query; } //传回对象{'id':item.id,'name':item.name}

编程式导航路由

router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)

<button @click="gorouter">跳转</button> //代码操作路由跳转
    gorouter() {      
      this.$router.push("/");	//1.push  方法里面直接写路由的路径     
      this.$router.push({path:"/"});//2.push  方法里面写对象{path:"/"}     
      //3.跳转的时候携带参数-get传值式写法 /register?plan=private
      this.$router.push({path: "/register", query: {plan: 'private'}});
      //4.编程时里面的动态路由传值
      this.$router.push(
         {path: `/user/${userId}`});

• 获取：对象

mounted(){ this.$route.query; } //传回对象

同级路由

子父路由

配置页面路由时：子路由显示在父路由组件的内部

{
      path:"/home",
      component:Home,     
      children:[ //子路由显示在父路由组件的内部
        {
          path:"/home/cart",
          component:Cart
        }
      ]
    }

路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，使用一个组件，组件会复用不使用生命周期钩子函数。可以简单地 watch (监测变化)$route对象OR导航守卫beforeRouteUpdate

  watch: {
    $route(to, from) {
      // 对路由参数变化作出响应...
    }
  }
  OR
   beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
    next()
  }