Vue-Router Basic Study Notes (Summary)

npm install vue-router
yarn add vue-router

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

(VueRouter)

<router-link to='/home'></router-link>  //You can use it in template to implement a tag that can be clicked and redirected tothis.$('/about');  //Skip to about page in the methods methodthis.$('-1');  //existjsReturn to the previous page

this.$  //Get the route parameters in js.router-link-active  //The matching style of the currently selected route is$  //Get query parameters$  //Hash

export default new Router({
  routes:[
    {        //The first layer is the top-level route. The router-view in the top-level route shows the sub-router selected by router-link in the router-link.      path:'/',
      name:'Home',
      component:'Home'
    },{
      path:'/user/:id',  ///user/cai
      name:'user',  //:id is a dynamic path parameter      component:'user',
      children:[
        {
          path:'userInfo',  ///user/cai/userInfo
          component:'userInfo'  //The child route will be rendered into the parent component's router-view        },{
          path:'posts',
          component:'posts'
        }
      ]
    }
  ]
})
(Router);

//For example: the user changes everything to user two, the routing parameters are changed, but the components are the same, and will be reused//Cut from /user/cai to /user/wan

//Method 1:  watch:{
    '$route'(to,from){
      //Do something, such as: update data    }
  }
//Method 2:  beforeRouteUpdate(to,from,next){
    //Same as above  }

({name:'user',params:{userId:'123'}})  //Name route navigation to user component<router-link :to='{name:'user',params:{userId:'123'}}'>user</router-link>

({path:'register',query:{plan:'cai'}})  //query query parameters({path:`/user/${userId}`})  //query

(location,onComplete,onAbort)
()  //replace(-1)

// When there is only one router-view in the current component, the child component will be rendered here by default.
<router-view class='default'></router-view>
<router-view class='a' name='left'></router-view>
<router-view class='b' name='main'></router-view>

routes:[
  {
    path:'/',
    components:{
      default:header,
      left:nav,
      main:content  //The content component will be rendered in the router-view with name main    }
  }
]
//Nested named views are: subroutine + named views

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/b', redirect: { name: 'foo' }},  //Name routing method    { path: '/c', redirect: to => {  // Dynamically return to the redirect target     // Method reception Target routing as parameter     // return redirected string path/path object    }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }  //Alias: Component A will also be used when accessing /b  ]
})

const User={
  props:['id'],
  template:`<div>{{id}}</div>`
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
  
    // For routes containing named views, you must add the `props` option for each named view separately:    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: 404}
  ]
})

//Nginx
  location / {
   try_files $uri $uri/ /;
  }
  
//Apache
  <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . / [L]
  </IfModule>
//
  const http = require('http')
  const fs = require('fs')
  const httpPort = 80
  ((req, res) => {
   ('', 'utf-8', (err, content) => {
    if (err) {
     ('Cannot open the page.')
    }
    (200, {
     'Content-Type': 'text/html; charset=utf-8'
    })
    (content)
   })
  }).listen(httpPort, () => {
   ('Open: http://localhost:%s', httpPort)
  })
  
//Used Express  [Using middleware][1]

 routes: [
  { path: '/user/:id', component: User, props: true },
 
 
  // For routes containing named views, you must add the `props` option for each named view separately:  {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
  }
 
 ]