preface

This article first uses an example to show the basic use of vue-Router, then focuses on routing component parameter passing and the use of history and hash modes

example

Let’s start with a simple example to look at some basic uses of vue-Router

<div id="app">
  <router-link to='/home'>Home</router-link>
  <router-link to='/about'>About</router-link>
  <router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  const Login = {
    template: '<div background-color="blue">Login</div>'
  }
  const Home = {
    methods: {
      toMyInfo() {
        this.$router.push({
          path:  '/home/myInfo/knight'.query: {
            age: 18,}}); }},template: ` 
        

         Home 
          
        
 `
  }
  const MyInfo = {
    computed: {
      name() {
        return this.$route.params.name;
      },
      age() {
        return this.$route.query.age; }},template: `
        
 
         

          MyInfo
         
 
         

           {{ name }}
         
 
         

          {{ age }}
         
 
        
`
  }
  const About = {
    template: '<div>About</div>'
  }
  const router = new VueRouter({
    routes: [{path: '/'.redirect: '/login'}, {name: 'login'.path: '/login'.component: Login,
      },
      {
        name: 'home'.path: '/home'.component: Home,
        children: [{name: 'myInfo'.path: 'myInfo/:name'.component: MyInfo,
          }
        ]
      },
      {
        name: 'about'.path: '/about'.component: About,
      }
    ]
  })
  const vm = new Vue({
    el: '#app',
    router,
  })
</script>
Copy the code

Route component parameters are transmitted

We can pass route.params as props to the component by setting props in the Routes configuration item: true

<div id="app">
  <router-view></router-view>
</div>
<script>
  const User = {
    props: ['id'].template: '<div>User {{ id }}</div>',}const router = new VueRouter({
    routes: [{path: '/user/:id'.component: User,
        props: true}]})const vm = new Vue({
    el: '#app',
    router,
  })
</script>
Copy the code

If we configure props as an object, we pass the object we configured as props to the child component

But route.params is no longer passed as props to the child component

<div id="app">
  <router-view></router-view>
</div>
<script>
  const User = {
    props: ['id'.'name'].template: '<div>User id: {{ id }} name: {{ name }}</div>',}const router = new VueRouter({
    routes: [{path: '/user/:id'.component: User,
        props: { name: 'knight'}}}])const vm = new Vue({
    el: '#app',
    router,
  })
</script>
Copy the code

We can also configure the props configuration item as a function

Here we can see that the route argument is the this.$route object

<div id="app">
  <router-view></router-view>
</div>
<script>
  const User = {
    props: ['id'.'name'.'route'].computed: {
      aaa() {
        console.log(this.$props)
      }
    },
    template: '<div>User id: {{ id }} name: {{ name }} {{ aaa }}</div>',}const router = new VueRouter({
    routes: [{path: '/user/:id'.component: User,
        props: route= > ({ 
          name: route.query.name, 
          id: route.params.id,
          route: route,
        })
      }
    ]
  })
  const vm = new Vue({
    el: '#app',
    router,
  })
</script>
Copy the code

history 和 hash

Vue-routre is in hash mode by default, we can also configure histoory to change this mode

<div id="app">
  <router-link to="/user">User</router-link>
  <router-view></router-view>
</div>
<script>
const User = {
  template: '<div>User</div>',}const router = new VueRouter({
  mode: 'history'.routes: [{name: 'user'.path: '/'.component: User,
      alias: '/user'},]})const vm = new Vue({
  el: '#app',
  router,
})
</script>
Copy the code

But if the route such as direct access to http://127.0.0.1:5500/user will go wrong

Background requests should uniformly return all requested urls to the index.html page