CLI -- 路由基础 · Vue&&TypeSprict--基础总结

[TOC] >[success] # 生成router.js文件中透露的技巧 ~~~ 1.你已经按照我们'Vue--模块化方式结构'篇章中cli-ui篇章做了同等的结构目录，先从router.js 做入手点，看一下自动生成的能给我们什么其他篇章中没有的知识点 ~~~ >[danger] ##### 隐藏知识点 -- 路由控制组件懒加载 ~~~ 1.下面about路由组件中使用了import 进行组件导入，这样导入的是，当路由控制组件显示的时候，组件才显示 ~~~ ~~~ import Home from '@/views/Home.vue' export default [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') } ] ~~~ >[danger] ##### 需要分清$route 和 $router ~~~ 1.'$router' 作为'VueRouter'实例对象可以用它提供的方法进行一些路由跳转方面的操作 2.'$route' 可以获取'当前路由规则，路径,参数' ~~~ >[danger] ##### 分清history 和 hash ~~~ 1.两种方式均为客户端路由的实现方式：当路径法发生变化，不会向服务器发送请求，使用js监视路径的变化根据不同的地址渲染不同的内容，如果需要服务器端的内容会发送Ajax请求来获取 1.1.Hash模式url中带#号 #号后边内容为路由地址 url带井号或者问号 1.2.History 模式正常url模式 2.原理区别: 2.1.Hash模式是基于锚点，以及onhashchange事件。通过锚点值作为路由地址，路由变化后触发onhashchange事件 2.2.History 模式是基于HTML5中的History API 有兼容问题 history.pushState() IE10以后才支持 history.replaceState() 不会向服务器发送请求，仅改变浏览器地址栏中的地址，并且将地址记录到历史记录中 3.虽然History 模式不会向后台发送请求，但是注意一点，用户如果刷新页面或者重新请求该地址会像后台服务器发起请求，此时没有对应连接对应的页面会产生查找不到页面，如果使用history模式需要后台配合 4.vue-cli已经配置好了对history模式的支持，因此没有以上的问题，即刷新后向服务器发送请求后并没有返回404 5.总结： 5.1.'Hash 模式'： 5.1.1.URL中#后面的内容作为路径地址，仅改变# 后面的内容则不会向服务器请求这个地址，但会记录到访问历史中 5.1.2.监听hashchange事件，url改变会触发该事件 5.1.3.根据当前路由地址找到对应组件重新渲染 5.2.History 模式 5.2.1通过history.pushState()方法改变地址栏，仅改变地址栏并将其记录到访问历史中，并不会跳转到指定路径即不会向服务器发送请求监听 popstate 事件，可以记录改变后的地址，调用pushState和replaceState时不会触发该事件，后退或前进历史页面时才会触发根据当前路由地址找到对应组件重新渲染 ~~~ >[info] ## 根据路由章节我们更应学到 ~~~ 1.强调：首先views文件夹中的内容和components文件夹中的内容虽然都是组件的形式，但是views 是将页面划分为组件，components中是页面中单独某一块做成组件，这个组件可能在views中组件任意一个中使用 ~~~ >[danger] ##### 动态路由 -- 再次了解 ~~~ 1.顾名思义路由是动态生成，可以进行同一个类型url进行匹配，举个例子: 'http://localhost:8080/#/argu/2', 'http://localhost:8080/#/argu/3', 'http://localhost:8080/#/argu/4', 2.这一个系列我们想做匹配，就像下面案例那样我们把不确定参数生成一个 name变量做接受，在name变量前面加冒号来让他动态起来 ~~~ * 在router.js 写的一个路由匹配 ~~~ // 下面案例中argu.vue 在views 组件中声明的，你也可以理解为views组件中的组件在能和路由做搭配 export default [ { path:'/argu/:name', component:() => import('@/views/argu.vue') } ] ~~~ >[danger] ##### 嵌套路由 -- 再次了解 ~~~ 1.顾名思义在路由中在做一个路由，为什么会有这样的需求，首先有时候，我们在某个页面点击后，会跳转另一个页面，虽然跳转到另一个页面，但这个页面和上个页面却有着关系，因此需要嵌套路由 2.嵌套路由使用的是'children'这个key在路由中，但是children路由中的地址，禁止连接前面加'/' 3.下面的案例中从'parent'跳到他的子路由'children',在连接地址的写法是如下: 'http://localhost:8080/#/parent/children' 4.要注意，这里的子路由对应的组件也是写到views 文件中，因为子路由对应的子组件，也是视图 5.不是所有东西都要加'router-link',要知道他只是一个负责连接跳转的标签，而且相当于a标签 ~~~ * 在router.js ~~~ export default [ { path:'/parent', component:() => import('@/views/parent.vue'), children:[ { // 不要加斜线 path:'children', component:() => import('@/views/children.vue'), } ] } ] ~~~ * parent.vue ~~~ <template>  <router-view></router-view> </template> <script> export default { name: "parent" } </script> <style scoped> </style> ~~~ >[danger] ##### 命名路由--再次了解 ~~~ 1.上面的案例都是通过'router-link' 中的'to'属性和制定的连接进行搭配跳转，命名路由则是，路由中定义的名字进行跳转 2.思考为什么要这么做，首先在路由的时候，我们定义了一个组件和一个对应的跳转链接，链接我们已经在路由阶段定义好了，那么是否还需要在 'router-link' 在定义一次呢？其实这个就是利用了命名路由，我们在配置路由的时候加一个name，让name和'router-link' 进行匹配 ~~~ * 在router.js 中（下面案例中我们吧路径为about关联的组件起了一个 name 叫 about） ~~~ import Home from '@/views/Home.vue' export default [ { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') }, ] ~~~ * 使用(to 一定要动态v-bind绑定，k为name。对应的value 为在router name对应，要注意value是个字符串) ~~~ <router-link :to="{name:'about'}">About</router-link> ~~~ >[danger] ##### 命名视图 -- 让多个视图组件拼成一个大视图 ~~~ 1.整个项目中有views 文件夹和components文件夹，虽然两个都是组件，但是要注意的是，'views' 是视图组件，'components' 是视图组件中可能用到的公共组件，但是有时候一个视图可能是几个大视图拼接成的。 2.举个例子常见的页面布局，左右结构，我们可以吧左面菜单当做一个视图去维护，右面内容当做一个菜单去维护，然后两个视图组成一个布局这个时候就用到了视图命名。 3.注意视图命名是一组视图组件构成的因此这里用的是'components' 加's' 4.下面案例中'default' 是默认的意思会对应，没有name的视图，'email','tel' 是对象名字相同的视图 ~~~ * router.js ~~~ export default [ { path:'/name_view', components:{ default:()=>import('@/views/children.vue'), email:()=>import('@/views/email.vue'), tel:()=>import('@/views/tel.vue'), } } ] ~~~ * 在项目目录中App.vue 使用的案例 ~~~ <router-view ><router-view/> <router-view name="email"></router-view> <router-view name="tel"></router-view> ~~~ >[danger] ##### 路由重定向 -- 再次了解 ~~~ 1.利用redirect，去定向到'/' 路由对应的组价 export default [ { path: '/', name: 'home', component: Home }, { path:'/main', redirect:'/' } ] ~~~ >[danger] ##### js -- 操作路由实例 ~~~ 1.在Vue 实例中，想访问router 可以使用$router的方式去访问，利用$router ,里面的方法可以去控制路由 2.this.$router.go(-1) -- 返回上一页 this.$router.go(1) -- 前进一页 this.$router.back()-- 返回上一页 this.$router.push('参数是路由地址')-- 跳转指定页 3.this.$router.push 还可以像案例中使用一个对象，来规定一个路由参数连接形式如下: 'http://localhost:8080/#/parent?name=lison' ~~~ * 在Home.vue中案例 ~~~ <template> <div class="home"> <button @click="handleClick('push')">跳转链接</button> <button @click="handleClick('back')">前一页</button> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld }, methods:{ handleClick(type){ if(type === "back") this.$router.back(); else if(type === 'push'){ this.$router.push({ path:'/parent', query:{ name:"lison" } } )} } } } </script> ~~~ >[danger] ##### 路由解耦传参 ~~~ 1.详细内容可以参考路由篇章 ~~~ >[danger] ##### 路由的优先级 ~~~ 1.详细内容可以参考路由篇章,优先级从上到下 2.这里有个小提示,用户访问的不存在的页面应该返回404,想让一面返回404, 在配置路由的时候一定要在,这个路由的最下面,用星号做匹配,在router文件夹下router.js 可以这么: export default[ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') }, { path:'*', component:() => import(/* webpackChunkName: "about" */ '@/views/404.vue') } ] ~~~