VSCode自定义代码片段11——vue路由的配置

Posted 2022-11-11 浅香沉木

vue路由的配置

	// v'router
	// 11  如何自定义用户代码片段：VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存
	// vue的路由
	"Print to console": 
		"prefix": "v'router",
		"body": [
		    "// 位置：./router/index.js",
			"// 1,配置路由/映射表",
			"import VueRouter from \\"vue-router\\"",
			"import Vue from \\"vue\\"",
			"",
			"// 5,传入所有路由对应.vue组件  ",
			"// 【【【  主页页面",
			"import Home from \\"../components/Home.vue\\"",
			"import homeNews_1 from \\"../components/homeNews_1.vue\\"",
			"import homeNews_2 from \\"../components/homeNews_2.vue\\"",
			"// 关于页面    路由懒加载：当代码量过大时，先放在服务器，用时在请求",
			"const About = () => import('../components/About')",
			"// 用户页面",
			"import User from \\"../components/User\\"",
			"import Profile from \\"../components/profile\\"  // 】】】",
			"",
			"// 2,通过Vue.use(插件)来安装插件",
			"Vue.use(VueRouter);",
			"",
			"// 4,映射表",
			"const routers = [",
			"    // 【【【",
			"    path: '/home',// 路由键",
			"    component: Home // 路由值",
			"    , children: [//子路由，Home.vue组件的dom中可使用<router-link>和<router-view>",
			"    ",
			"    path: 'news_1',// 被选择：<router-link to=\\"/home/news_1\\">",
			"    component: homeNews_1",
			"    ",
			"    , ",
			"    path: 'news_2',",
			"    component: homeNews_2",
			"    ",
			"    , ",
			"    path: '/',",
			"    redirect: homeNews_1 // 子路由重定向",
			"    ",
			"",
			"    ]",
			"    , //~额，强迫征：先声明,再使用",
			"    path: '/',",
			"    redirect: \\"/home\\" // 重定向，路由默认路径",
			"",
			"    // 】】】",
			"    , ",
			"    path: '/about',",
			"    component: About",
			"    ",
			"    //【【【",
			"    , ",
			"    path: '/user/:userId',// 动态路由，同时：<reouter-link :to=\\"'/user/'+user_id\\">",
			"    component: User",
			"    , name: \\"User\\"  //仅用于被keep-alive组件排除保存重定向",
			"    , meta: ",
			"    title: \\"用户\\"//此参数用于改页面标题",
			"    ",
			"    ",
			"    , ",
			"    path: '/profile',// 被传递参数1：<reouter-link :to=\\"path:'/profile',query:name:'暗音',age:18\\">,此参数在路由值中$route.query使用",
			"    // 被传递参数方式2: this.$router.push(path:'/profile',query:name:'kobe',age:19,height:1.87 ),此参数在路由值中$route.query使用",
			"    component: Profile",
			"    , name: \\"Profile\\" //仅用于被keep-alive组件排除保存重定向",
			"    , meta: ",
			"    title: \\"文档\\"//此参数用于改页面标题",
			"    ",
			"    ",
			"    // 】】】",
			"];",
			"",
			"// 3,创建VueRouter对象",
			"const router = new VueRouter(",
			"    routers//映射表注册",
			"    , mode: \\"history\\"//浏览记录路由改变方式",
			"    , linkActiveClass: \\"active\\"//路由键处于活跃状态对应router-link将添加的类名",
			");",
			"",
			"// 6，前置导航守卫：",
			"router.beforeEach((to, from, next) => ",
			"    //从from跳转到to",
			"    document.title = to.matched[0].meta.title;",
			"    next();//必须调用",
			");",
			"// 7，后置导航守卫：",
			"router.afterEach((to, from) => ",
			"    document.title = \\"哈哈\\" + to.matched[0].meta.title + \\"嘿嘿\\";",
			");",
			"",
			"// 最后,传出到main.js文件Vue实例对象中new Vue(router:router)注册前端路由",
			"export default router;",
			"",
			"//     <router-view> 是一个占位标签",
			"// 路由键如何改变：",
			"//     1,<router-link to=\\"/home\\" tag=\\"button\\" replace>全局组件标签(vue-router已全局注册)",
			"//     2,所有.vue组件导出实例内都有$router对象（其实就是本文件最后导出的对象）：this.$router.push(\\"/home\\")",
			"//     补充：所有.vue组件导出实例内都有$route对象,即当前活跃的路由对象，一般组件用this.$route.params.属性名 来取得当前活跃路由中保存的属性值",
			"// 动态路由：",
			"//     1，一个页面path路径不确定时临时变量占位",
			"// URL的组成：",
			"//    协议://主机:端口/路径?查询#片段",
			"//     scheme://host:port/path?query#fragment",
			"// next(路由路径/false/error)",
			"// <router-view>被<keep-alive exclude=\\"Profile\\">包住过的路由定向可被保存不被销除",
			"// 子组件内导航：",
			"//     beforRouterLeave(to,from,next) this.path=this.$route.path; next();   //activated()this.$router.push(this.path)//记录子组件定向",
			"//  <keep-alive exclude=\\"Profile,User\\">",
		],
		"description": "vue的路由"
	

@沉木