VueRouter 动态路由/路由懒加载/路由嵌套/路由传参等

路由配置的两种方式

1. location.hash=“url” 可以通过hash来改变href，但页面不发生刷新
2. history.pushState({},’’,‘url’)
   可以通过html的history改变路由且不刷新页面
   replaceState() go() back() forward()

vue中router和route的区别：

this.$router //指的是newVue的实例对象   this.$router.push/this.$router.replace
this.$route  //指的是当前活跃状态下的路由对象  this.$route.params

安装vue-router: npm install vue-router --save 添加–save是因为项目运行时也需要依赖路由

vue-动态路由

浏览器显示地址栏的信息可能是动态改变的。路由路径非固定的。需要根据用户的操作响应式更改的。
比如在index.js文件中给路径传参，通过this.$route.params引用参数：

{ path:'/user/:abc',component:user }    this.$route.params.abc

vue-路由懒加载

• 路由懒加载的效果

• 路由懒加载的方式。只要记得第三种方式就好了。

• 懒加载 VS 直接加载：
  

vue-路由嵌套

{
    path: '/Login',
    // name: 'Login',
    component: Login,
    children: [
      {
        path: '', //表示login默认状态下显示的子组件是扫码登录组件
        name: 'login_qrcode',
        component: login_qrcode
      },
      {
        path: '/login_qrcode',//子组件path可以不加反斜杠
        name: 'login_qrcode',
        component: login_qrcode
      },
      {
        path: '/login_user',
        name: 'login_user',
        component: login_user
      }
    ]
}

vue-路由传参

• 路由传参的方式：

• 实例：

params:
{
	path:'/user/:id',
	component:user 
}    
//在相应组件中引用：
this.$route.params.id

query:
//方式一
<router-link :to="{ path:'',query:{} }">路由传参</router-link>

//方式二
在methods方法中：
this.$router.push({
	path: '',
	query: {
		key1: 'value1',
		key2: 'value2',
		key3: 'value3'
	}
})