路由 vue-router

​ 单页面应用 --- 在页面实现切换的时候不进行刷新

​ 路由实现页面之间的切换跳转 每一个接口地址返回不同资源

​ 每一个前端地址匹配显示不同的页面

1 安装
npm i vue-router@3 --save

2 创建页面组件  home.vue center.vue wode.vue

3 创建路由的js文件
src/router/index.js
	import Vue from "vue"
	import Router from "vue-router"
	Vue.use(Router)
	
	const routes = [
		{
		path:"/",
		component:组件,
		
		}
	]
	const router = new Router({
		routes
	})
	export  default router

 4 main.js
 	 import router from "./router"
 	 new Vue({
 	 	router
 	 })
 	 
 5 App.vue
 	<!---显示--->
 		<router-view></router-view>
 	   <!---切换--->
 	   <router-link to='/'></router-link>

router-link
					to='地址'
					:to='options' 对象写法
					activeClass='修改 router-link-active'
					exactActiveClass='修改 router-link-exact-active'
					replace   一个切换模式 没有历史记录  一般会添加到嵌套的子路由
					tag='改变标签'
					exact='将模糊匹配转化为精准匹配'

二、路由传参

1 动态路由传参

​ path每次都不一样

使用单个参数传递

router-link  to='/detail/参数'

routes=[
	{
		path:'/detail/:name'
	}
]
this.$route.params.name 获取参数

可以传递多个的参数 

2 query传参

​ 推荐时使 因为它的path不变

适用于多个参数传递

 

router-link :to='{path:"/info",query:{key1:value1,key2:value2...}}'
{path:"/info"}
this.$route.query

三、嵌套路由 

{
        path: '/center',
        component: Center,     //router-view
        til: "中心",
        redirect: "/center/demo1",  //重定向
        children: [
            {
                path: 'demo1',   path:'名字'  path:"/center/demo1"
                component: Demo1
            },
            {
                path: 'demo2',
                component: Demo2,
             
            },
            {
                path: 'demo3',
                component: Demo3
            }
        ]
    },

 $route 

params // 动态路由传参
query  // query传参
path   // 当前路由地址
name   // 路由的名字
fullPath  //完整地址 
matched  //面包屑 ***   [{},{},{}]
meta     // 自定义信息   写在meta里面
	til
	isExact
	hidden

命名视图 

  {
        path: '/',
        components: {
            default: Home, //不设置名字就是默认的 
            footer: Footer,
        },
        til: "首页",
        isExact: true
   },

编程式导航 

this.$router  === router

router.push('/路径',{path:"",name:"",query:{}})
router.replace()  replace 模式
router.history.go()  -1 1 0

router.addRoutes() //重点
router.getRoutes() //获取路由

路由懒加载 

必须使用的组件或者全局组件我们直接加载就可以了，
页面组件可以选择使用懒加载 

const Wode = ()=> import("../views/wode.vue")

提高用户体验
骨架屏   --  
懒加载
banner