day43（（VueJS）路由（路由的基本配置流程 路由配置表的抽离 导航方式（标签式导航，编程式导航）路由的不同级别））

一.路由的基本配置方式

1.要点总结
	1) 流程（了解）
	  1> 在文件夹router中存在一个index.js文件，该文件中进行路由的管理对象的创建和导出
	  2> 在入口文件main.js文件中将路由管理对象导入并注册插件（使用应用实例注册插件需要写在挂载容器的语句前面）
	2) 路由模式
	  1> history模式：history: createWebHistory(import.meta.env.BASE_URL);
	    1>> 这种写法在地址栏显示：/一级路由/二级路由/.....
	  2> hash模式：history: createWebHashHistory(import.meta.env.BASE_URL);
	    1>> 这种写法在地址栏显示：/#/一级路由/二级路由/....
	    
2.代码解析
	router/index.js文件：
	
	import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
	
	import routes from './routeConfig';-----------导入路由配置表（抽离出的配置表存储的文件地址）
	
	const router = createRouter({-----------------创建路由管理对象
	
	路由模式：以下两种模式二选一即可，一般选择history
	  history: createWebHistory(import.meta.env.BASE_URL);---------------history模式
	  history: createWebHashHistory(import.meta.env.BASE_URL);----------hash模式
	
	  routes-------------注册路由配置,由routes:routes;缩写而来，原本的直接写在这里路由配置表抽离出来新建一个js文件存放，然后导入该文件，在这里注册（原因是路由配置表的内容比较长，放在这里不利于统一管理）
	})
	
	export default router----------导出路由管理对象
	
	main.js入口文件：
	
	import { createApp } from 'vue';
	import App from './App.vue';
	
	import router from './router';-------------导入路由管理对象
	
	const app = createApp(App)
	
	app.use(router);------------------注册路由插件, 任何一个组件都可以通过组件实例调用this.$router方法获取该路由管理对象
	
	app.mount('#app')

二.路由配置表的抽离

1.步骤总结
	1） 步骤
	  1> 新建一个js文件将所有需要添加路由规则的组件导入该文件
	  2> 新建一个空数组然后导出，在该数组中依次为组件添加路由规则
	  3> 在原本的路由配置文件中导入该js文件，并注册路由配置表
	2） 语法：（一条路由规则包含三个键值对）
	  1> path:"/路由地址"（开头必须是"/"，不同于文件路径地址）
	  2> name:"路由地址的别名"（是一个字符串）
	  3> component:路由地址对应的组件
	    1>> 组件懒加载写法：component:()=>import("组件路径")（使用懒加载写法则配置表js文件不用导入组件）
	    2>> 懒加载写法是一种优化写法，直接在component后面写组件名，相当于将所有组件打包至一个js文件，只要一个组件加载出问题，路由就加载不了，懒加载写法使用动态导入，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效
	    
2.代码解析
	import HomeView from '../views/HomeView.vue';------------导入组件
	import AboutView from '../views/AboutView.vue';
	
	export default [ ---------------------导出路由配置表
	    {----------------------一个对象就是一条路由规则
	      path: '/home', -------------------------路由地址
	      name: 'home',-----------------------------路由地址的别名
	      component: HomeView ---------------------------路由地址对应的组件
	    },
	    {
	      path: '/about',
	      name: 'about',
	      component: ()=>import("../views/AboutView.vue")
	    }
	]

三.路由的导航方式

标签式导航

1.要点
	1） 标签式导航, 借助RouterLink组件跳路由，应用面较小，不常用
	2） RouterLink双标签 是vue-router库提供的专门用于跳路由的组件, 它最终会渲染成a标签, to属性的值是路由地址
	3） 语法
	  1> to属性：to="/路由地址"
	    1>> to属性首先切换地址栏的路由地址，然后由该地址到配置表匹配相对应路由地址的组件并渲染
	  2> 路由渲染标签添加高亮的语法（css）：a.router-link-active{样式}
	  
2.代码演示
	<script>
		export default {
		  methods:{
		    handleClick(){
		
		      this.$router.push('/home');--------------------this.$router是获取路由管理对象的方法
		    },
		    handleClick2(){
		      this.$router.push('/about');
		    }
		  }
		}
	</script>
	
	<template>
	  <header>
	    <div class="wrapper">
	      <nav>
	        <RouterLink to="/home">Home</RouterLink>-----------标签式导航, 借助RouterLink组件跳路由,to="/路由地址"
	        <RouterLink to="/about">About</RouterLink>
	      </nav>
	    </div>
	  </header>
	
	  <RouterView /> ---------------------也可以写成<router-view />，这是vue框架允许的写法，vue中所有的驼峰命名法标签都可这样改写
	</template>
	<style scoped>
	a.router-link-active{------------------路由渲染标签添加高亮的语法
	  color: red;
	  font-weight: bold;
	}
	</style>

编程式导航

1.要点
	1） 编程式导航：借助js代码跳路由, 这种跳路由的方式较为灵活( 可以在事件处理函数,条件语句,请求的回调函数中调用 )
	2） 语法：
	  1> 组件实例方法
	    1>> $router：组件实例获取当前项目路由对象的方法通常为：this.$router
	  2> 路由对象跳转路由的方法
	    1>> push：this.$router.push('/路由地址')
	    2>> go：this.$router.go('/路由地址')
	    
2.代码演示
	<script>
		export default {
		  methods:{
		    handleClick(){
		      this.$router.push('/home');------------this.$router 路由管理对象
		    },
		    handleClick2(){
		      this.$router.push('/about');---------------this.$router 路由管理对象
		    }
		  }
		}
	</script>
	
	<template>
	  <header>
	    <div class="wrapper">
	     <nav>
	        <button @click="handleClick">Home</button>
	        <button @click="handleClick2">About</button>
	      </nav>
	    </div>
	  </header>
	  <router-view />  或   <RouterView />
	</template>
	<style scoped>
		a.router-link-active{
		  color: red;
		  font-weight: bold;
		}	
	</style>

四.路由的不同级别

要点总结

1.要点总结
	1） 路由
	  1> 一级路由：一级路由的切换时切换整个页面
	  2> 嵌套路由：嵌套路由又包括二级路由、三级路由等，嵌套路由的切换是页面局部切换
	    1>> 添加嵌套路由的语法：children:[{嵌套路由规则},{嵌套路由规则},.....]（该语句在需要添加嵌套路由的路由规则中写）
	  3> 注意：
	    1>> 同级路由是互斥的，一次只能匹配并渲染一个
	2） 重定向路由规则（为了解决刚打开页面时默认的"/"路由地址在设定的路由地址中匹配不到，引起的插件警告问题）
	  1> 语法：
	  { 
	     path: '/', 
	     redirect: '/希望指向的目标组件的路由地址'
	    }
	  2> 注意：如果重定向指向的路由地址存在嵌套路由，那么也需要设置嵌套路由的重定向，否则页面刚打开时渲染不全。
	3） 404路由：写在路由规则最后面（404路由可以不用每层都加）
	  {
	          path: '/:error(.*)',（这里的括号内符号含义为多个任意字符（元字符.），表明多个任意字符只要不能匹配前面给定的路由规则中的地址）
	          component: NotFound
	      }
	      
2.代码总结
  导入需要添加路由规则的组件
	import Index from '../views/index/index.vue'
	import Login from '../views/login/login.vue'
	import City from '../views/city/city.vue'
	import Detail from '../views/detail/detail.vue'
	import NotFound from '../views/notfound/index.vue'
	
	import Home from '../views/index/home/home.vue'
	import Cate from '../views/index/cate/cate.vue'
	import Gwc from '../views/index/gwc/gwc.vue'
	import Mine from '../views/index/mine/mine.vue'
	
	export default [
	    {   
	        path:'/index',
	        name:'index',
	        component: Index,
	        children:[ ----------------------嵌套路由添加在上一级路由规则里面
	            {
	                path:'/index/home',
	                name:'home',
	                component: Home,
	            },
	            {
	                path:'/index/cate',
	                name:'cate',
	                component: Cate,
	            },
	            {
	                path:'/index/gwc',
	                name:'gwc',
	                component: Gwc,
	            },
	            {
	                path:'/index/mine',
	                name:'mine',
	                component: Mine,
	            },
	            {
	                path:'/index',
	                redirect:'/index/home'---------------------二级路由的重定向，如果存在嵌套路由，也必须设置重定向，否则页面会存在加载不全的问题
	            },
	            {
	                path: '/:error(.*)', ---------------------404路由，写在所有路由规则的末尾
	                component: NotFound
	            }
	        ]
	    },
	    {
	        path:'/login',
	        name:'login',
	        component: Login
	    },
	    {
	        path:'/city',
	        name:'city',
	        component: City
	    },
	    {
	        path:'/detail',
	        name:'detail',
	        component: Detail
	    },
	    { 
	        path: '/', 
	        redirect: '/index'  ----------------一级路由重定向
	    },
	    {
	        path: '/:error(.*)', ----------------------404路由
	        component: NotFound
	    }
	]