Vue中的路由 路由嵌套 路由传参

vue的路由

一级路由
概念：vue中路由是通过vue的插件vue-router来实现的 ，vue中路由有两种模式 hash模式（默认） history模式 ,根据不同的路径显示不同的组件

配置步骤：

1、要建立路由需要的组件
2、设置路径和组件的对应关系 router.js
3、//采用的是路由懒加载的模式

{
path: '/about', 路径
component: () => import('../views/About.vue') 组件
}

给组件找个位置来实现
通过这个内置组件
设置导航
通过来设置我们的导航
router-link默认的解析为a标签 如果不想解析为a标签 那么可以通过 tag属性来设置
通过to属性来设置要跳转的路径

怎么设置当前选中的样式
.router-link-acitve来设置我们默认样式

默认路由 重定向 , 通过在router.js中设置 redirect属性 来设置

一般情况下就是
{
​ path:"/",
​ redirect:“路径”
}

二级路由
配置：
在router.js中配置

    {
      path: '/z1',
      name: 'z1',
      component: () => import('./views//qza/z1.vue'),
      redirect: './z2',//默认主页 这里是重定向的使用快捷方式
      children:[
        {
          path: '/z2',
          name: 'z2',
          component: () => import('./views//qza/z2.vue'),
        },
      ]

vue的路由传参

概念：路由传参就是在路由调转的过程中，进行参数的传递
用途：点击不同的导航，进入到同一个页面，为了区分是在哪个导航来的

路由传参有两种方式：
query方式：
​视图导航语法

​ 	//编程导航的语法
​ 		*this.$router.push('/path?参数=值')*
​	//获取：
​ 		*this.$route.query.参数名*

params方式：
​ params传参它是路由的一部分，需要我们先进行路由配置
​ params传参把名和值分开 参数名在路由配置中写 值在导航中写

 //1、修改路由配置
​ 	   *path:"/path/:参数名"*
​ //2、视图导航语法
​ 	  //编程导航的语法	

​ 		//编程导航的query传参是根据路由配置的name属性进行传递，所有在设置之前需要给路由加一个name属 性
*​ this.$router.push({name:'',params:{参数名：值}})*
​ //获取：
​ 	   *this.$route.params.参数名*

两种传参的区别：
query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变 ;