vue-router 可以根据 URL 来获取 routers 定义的 name 属性吗

Posted 2023-05-11

参考技术A 可以的。this.$route.name
就可以获取到对应的name了
主要有以下几个步骤：
（1）
设置好路由配置
router.map(
'/history/:deviceid/:dataid':

name:
'history',
//
give
the
route
a
name
component:

...


)
这里有2个关键点：
a）给该路由命名，也就是上文中的
name:
'history',
b）在路径中要使用在路径中使用冒号开头的数字来接受参数，也就是上文中的
:deviceid,
:dataid；
（2）在v-link中传递参数；
history

这里的123，456都可以改用变量 参考技术B 路由器将自渲染对应的组件以及更新路由信息。
其中
可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。
路由对象和路由匹配
路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如
属性
说明
$route.path
当前路由对象的路径，如'/vi
$route.query
请求参数，如/foo?user=1获取到query.user
=
1
$route.router
所属路由器以及所属组件信息
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径名字
当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。
全匹配片段的语法是使用通配符*
如，/user/*any就会匹配到任何以/user为开头的路径，并给params对象中赋值一个属性any
动态片段的语法就是使用:作为标志。
使用路径名称
在定义路径规则的时候，如果你给它提供了一个name属性
最终都会匹配到/user/1这条路径上
路由选项
路由选项名
默认值
作用
hashbang
true
将路径格式化为#!开头
history
false
启用html5
history模式，可以使用pushState和replaceState来管理记录
abstract
false
使用一个不依赖于浏览器的浏览历史虚拟管理后端。
transitionOnLoad
false
初次加载是否启用场景切换
saveScrollPosition
false
在启用html5
history模式的时候生效，用于后退操作的时候记住之前的滚动条位置
linkActiveClass
"v-link-active"
链接被点击时候需要添加到v-link元素上的class类,默认为active
如，我想采用一个有路径格式化并启用Html5
history功能的路由器，则可以在路由器初始化的时候，指定这些参数：
这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。

vue-router是怎么实现的？

路由响应过程：

1. 浏览器发出请求

2. 服务器监听到num端口（或443）有请求过来，并解析url路径

3. 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）

4. 浏览器根据数据包的 Content-Type 来决定如何解析数据

一般的vueRouter的代码模式是这样的：

let router = new Router({
  mode: ‘history|hash|abstract‘,
  routes: [
    { // 默认页
      path: ‘*‘,
      redirect: to => {
        return ‘/‘
      },
      meta: {
        status: ***
      }
    },
    {  
      path: ‘/‘,
      name: ‘****‘,
      component: ****,
      meta: {
        status: ***
      }
    },
  ],
  beforeEnter: (to, from, next) => {}),
  scrollBehavior: fun()
})

可以看到的是使用Router这个类进行实例化【new Router(options)】

在使用vueRouter的时候，我们会在项目中使用Vue.use(Router)安装，它会加载VueRouter中的 install 方法使得所有组件都可以使用router的实例（this.$router/this.$route） 在install的时候实际上完成一些初始化的工作

(源码install.js)

1）在vue.prototype上注册一个$router/$route的实例

  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router

  Object.defineProperty(Vue.prototype, ‘$router‘, {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, ‘$route‘, {
    get () { return this._routerRoot._route }
  })

2）全局注册RouterView, RouterLink这两个组件

 Vue.component(‘RouterView‘, View)
 Vue.component(‘RouterLink‘, Link)

 

分为三种模式： hash, history(h5), abstract

(源码index.js)

switch (mode) {
  case ‘history‘:
    this.history = new HTML5History(this, options.base)
    break
  case ‘hash‘:
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case ‘abstract‘:
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== ‘production‘) {
      assert(false, `invalid mode: ${mode}`)
    }
}

 

三种模式的简单描述： 

a）hash

常见形式：http(https)://xxxxxx/#/xxxx

在h5之前浏览器不支持popState(window),pushState(history)和 replaceState(history)这几个事件，因此是通过hash值来改变路由，后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

（源码hash.js）

 // supportsPushState用于用于判断浏览器是否支持h5 
    window.addEventListener(supportsPushState ? ‘popstate‘ : ‘hashchange‘, () => {
      const current = this.current
      if (!ensureSlash()) {
        return
      }
      this.transitionTo(getHash(), route => {
        if (supportsScroll) {
          handleScroll(this.router, route, current, true)
        }
        if (!supportsPushState) {
          replaceHash(route.fullPath)
        }
      })
    })
  }

 

b）history

在h5之后，得到浏览器的支持就可以使用history模式了，在history模式下路由的改变会触发popstate事件，因此history模式原理也是对popstate事件的监听，然后做出相应操作。

（源码html5.js）

window.addEventListener(‘popstate‘, e => {
    const current = this.current
    // Avoiding first `popstate` event dispatched in some browsers but first
    // history route not updated since async guard at the same time.
    const location = getLocation(this.base)
    if (this.current === START && location === initLocation) {
      return
    }
    this.transitionTo(location, route => {
      if (supportsScroll) {
        handleScroll(router, route, current, true)
      }
    })
  })

 

c）abstract

abstract 模式是用于原生开发(非浏览器typeof window=== ‘undefined‘)的情况下，这就意味着不能使用window对象；另外由于在原生app中，页面储存一个数组栈中，它记录着页面的的访问记录，因此在js中最简单的就是定义数组进行模仿。

（源码abstrack.js）

constructor (router: Router, base: ?string) {
  super(router, base)
  this.stack = [] // 定义一个stack数组，用于存储路由
  this.index = -1 // 记录每个路由在stack中的索引
}

 

https://segmentfault.com/a/1190000015123061

https://zhuanlan.zhihu.com/p/24574970