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会保存传递过来的值，刷新不变 ;