Vue-Router知识点(持续学习整理中)

最新推荐文章于 2024-02-03 21:19:22 发布

山川pro

最新推荐文章于 2024-02-03 21:19:22 发布

阅读量272

点赞数

分类专栏： vue 文章标签： vue.js es6 javascript

本文链接：https://blog.csdn.net/RRRRRDong/article/details/103596739

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。
–>路由提供两种机制：路由和转送
路由：决定数据包从来源到目的地的路径，
转送：将输入端的数据转移到合适的输出端。
路由表：本质上就是一个映射表（每一个内网ip都会对应一个电脑标识），决定了数据包的指向。
前端渲染和后端渲染
–>后端渲染：也称服务端渲染。即后端处理url和页面之间的映射关系，这种情况下渲染好的页面，不需要单独加载任何的js和css，可以直接交给浏览器展示，这样也有利于SEO的优化
–>前端渲染：浏览器中显示的网页内容中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来。
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
SPA（单页面富应用）：最大的特点就是在前后端分离的基础上加了一层前端路由。
前端路由核心：改变URL，但是页面不会进行整体的刷新。那么如何做到呢？
–>①URL的hash：URL的hash也就是锚点（#），本质上是改变window.location属性，我们可以通过直接赋值location.hash来改变href，但是页面不会发生刷新。
–>②HTML5的history模式（pushState）：通过history.pushState（data，title，?url）来改变href。（pushState 类似于压栈操作，当执行该指令多次时，便会把一个个的href 压入栈中。可以使用history.back（）来执行出栈指令，进行返回操作。栈内元素始终遵循先进后出的原则）
–>③HTML5的history模式（replaceState）：通过history.replaceState（data,title,?url）来改变href。无法进行返回操作。
–>④HTML5的history模式（go）：history.back()等价于history.go(-1) history.forward()等价于history.go(1) 这三个接口等价于浏览器界面的前进后退。

路由的使用
–>1.安装vue-router ：npm install vue-router --save
–>2. 在模块化工程中使用它(因为是一个插件，所以可以使用Vue.use(VueRouter) 来安装路由功能)，分三步走：
① 导入路由对象，并且调用Vue.use(VueRouter)
② 创建路由实例，并且传入路由映射配置
③ 在Vue实例中挂载创建的路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

–> 使用vue-router 的步骤
a.创建路由组件
b.配置路由映射：组件和路由映射关系
c. 使用路由：通过<router-link>(结合to=""使用)和<router-view>(在根组件里使用)
– <router-link> 是内置的全局组件，可以在任何地方使用，它会被渲染成一个<a>标签，<router-view> ：该标签会根据当前的路径，动态渲染出不同的组件。

路由的默认路径：

//配置一个映射
const routers = {
  path: '/',
  redirect: ''
  // path 配置的是根路径，redirect是重定向，即把根路径重定向到redirect后的路径。
}

默认情况下，路径的改变使用的是URL的hash
–若要改变为HTML5的history模式（即路径里没有锚点#),可以做如下配置：

const router = new VueRouter ({
  routes,
  mode: 'history'
})

router-link 标签的属性
–> to="" :用于指定跳转的路径
–> tag="":用于指定<router-link>之后渲染成组件的类型。
–>replace:replace 不会留下history记录，所以在指定replace的情况下，后退键返回不能返回到上一个页面中。
–>active-class: 当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
a.在进行高亮显示的导航菜单或者底部tabbar时，会用到该类。
b.通常不会修改类的属性，会直接使用默认的router-link-active即可。

通过代码的方式跳转路由:this.$router.push('/user/ ') 或 this.$router.replace(' ')
通过代码的方式传递数据：this.$router.push('/user/' + this.userId) 或者this.$router.push( { path: '/path', query: { name: 'rdd' , age: '18'}} )
动态路由：

很多时候，我们需要将具有给定模式的路由映射到同一组件。例如，我们可能有一个User应为所有用户呈现的组件，但具有不同的用户ID。在vue-router我们可以在路径中使用动态段以实现：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

现在，类似/user/foo和的URL /user/bar都将映射到相同的路由。
动态段用冒号表示 : 。当路由匹配时，动态分段的值将与this.$route.params每个组件中一样公开。因此，我们可以通过将User的模板更新为来呈现当前用户ID ：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

路由的懒加载（用到时，再加载）：使用打包构建应用程序时，JavaScript打包程序可能会变得很大，从而影响页面加载时间。
–>如果我们可以将每个路由的组件拆分为单独的块，并且仅在访问路路由时才加载它们，则效率会更高。
–>将Vue的异步组件功能和webpack的代码拆分功能结合在一起，可以轻松地懒惰加载路由组件。
懒加载的方式：
–>方式1（推荐写法）：

//首先，可以将异步组件定义为返回Promise的工厂函数（应将其解析为组件本身）：
const Foo = () => Promise.resolve({ /* component definition */ })
//其次，在webpack 2中，我们可以使用动态导入语法来指示代码分割点：
import('./Foo.vue') // returns a Promise

结合以上两者，这就是如何定义一个异步组件，该组件将由webpack自动代码拆分：

const Foo = () => import('./Foo.vue')
//无需更改路由配置，只需Foo照常使用即可：
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

–>方式2（较早写法）

const Home = resolve => { require.ensure(['../components/Home.vue'], 
  () => { resolve(require('../components/Home.vue')) })}

–>方式3：AMD写法

const About = resolve => required (['../components/About.vue'],resolve)

实现嵌套路由两个步骤：
a.创建组件a对应的子组件b，并在路由映射中配置对应的子路由
b.在组件a内部使用<router-view>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
/*要将组件渲染到此嵌套路由中，
我们需要children在VueRouter构造函数config中使用该选项：*/
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

vue-router参数传递两种类型
–>1.params
a.配置路由格式：/router/：id
b.传递的方式：在path后面跟上对应的值
c.传递后形成的路径：类似于/router/abc, /router/123
–>2.query
a.配置路由格式：/router,即普通配置
b.传递的方式：对象中使用query的key作为传递方式

<router-link :to="{path: '/profile', 
  query: 
    {name: 'rdd', 
      age: '18'}}"
> 
  档案
</router-link>

c.传递后形成的路径：/router?id=123,/router?id=abc
–>通过{{$route.query}}来取参数

通过代码的方式传递参数：this.$router.push('/user/' + this.userId) 或者this.$router.push( { path: '/path', query: { name: 'rdd' , age: '18'}} )
所有的组件都继承自Vue类的原型。所以只要是通过Vue.prototype.xxx() { }设置的方法，所以组件都可以通过this.xxx 来进行调用
this.$router 和this.$route的区别
–> $router 为VueRouter实例，想要导航到不同URL，则使用$router.push方法
–>$route为当前router跳转对象里面可以获取 name. path. query. params等
URL:协议://主机:端口/路径?查询#片段
–>scheme://host:port/path?query#fragment
导航守卫
–> 前置守卫(路由跳转之前调用)(guard):从from 跳转到 to
router.beforeEach((to, from, next) => { // ... })
–>后置守卫（路由跳转之后调用）router.afterEach((to, from) => { // ... })
–>以上两个称为全局守卫
路由独享的守卫

您可以beforeEnter直接在路由的配置对象上定义防护：



const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})