Common basics in vue-router work

vue-router official document

Use of router

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>


//  定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  {
    
     path: '/foo', component: Foo },
  {
    
     path: '/bar', component: Bar }
]

//  创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    
    
  routes // (缩写) 相当于 routes: routes
})

Dynamic routing

1. What is dynamic routing?
   Dynamic routing is a form of routing that can receive parameter data, and part of the routing address will change
2. How to receive parameters passed by dynamic routing?
   $route.params
   Obtaining and passing parameter data through props attribute
   A. We can set the props attribute to true, route.params will be set as the component attribute, then the component can receive route.params through props
   B. You can set the props attribute to one Object, then the component can receive the data of the object through props
   . C. You can also set the props property as a function, then you can pass the parameter data and the object data to the component at the same time.

Programmatic navigation and routing parameters

  // 1. 用name路径的方式进行路由传参
  this.$router.push({
    
     name: 'Goods', params: {
    
     goodsID: id } })
 // 2.  用path路径的方式进行路由传参
   this.$router.push({
    
    path:'goods',query:{
    
    goodsID:id}})	
    //接收this.$route.query.goodsID

Hash and History mode

vue-router defaults to the hash mode, ur uses # to locate the route, which is not good for seo. If you set the history, you can use the normal url mode, the
history mode, that is, the normal url mode. This mode makes full use of the history.pushState API to complete the URL redirection. No need to reload the page

use:

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

The difference between the two

1. Hash mode url with # sign, history mode without # sign
2. If you consider the url specification, then you need to use the history mode, because the history mode does not have #, which is a normal url, suitable for development habits
3. Share pages made with Vue and React to third-party apps. Some apps do not allow URLs, so use history mode
4. One problem with using history is that when you access the secondary page, a 404 error will occur when you do the refresh operation, then you need to cooperate with the back-end to configure the Apache or Nginx url redirection to redirect to your homepage. routing

Routing guard

It can be used for user login interception in the absence of registration
you can use router.beforeEachto register a global pre-guard:

const router = new VueRouter({
    
     ... })

router.beforeEach((to, from, next) => {
    
    
  // ...
})

Each guard method receives three parameters:

• to: Route: the target route object that is about to enter
• from: Route: The route that the current navigation is about to leave
• next: Function: This method must be called to resolve this hook. The execution effect depends on the call parameters of the next method.

The guard in the component

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

const Foo = {
    
    
  template: `...`,
  beforeRouteEnter (to, from, next) {
    
    
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    
    
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    
    
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}