Vue Study [2]: Vue Router

Description

The article for vue router.
Original post link:https://www.cnblogs.com/markjiang7m2/p/10796020.html
Source code:https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Router

Start

Actually we should only remember 3 points for vue router.

1. <router-link>. For user to click.
2. <router-view>. To show the related content.
3. router index.js. Declare which content will be show when user click a link.

<router-link> & <router-view> is a pair of tags for vue router. They are always used together.

router-link

<router-link> will be compiled into <a> when we build the project.
There is an important property to in <router-link>. It will tell the website which path will be redirected to when user click this link.

Html in App.vue

<ul>
    <li><router-link  to="/" >Home</router-link></li>
    <li><router-link  to="/food" >Food</router-link></li>
    <li><router-link  to="/rating">Rating</router-link></li>
    <li><router-link  to="/seller">Seller</router-link></li>  
</ul>

It shows that when user click the Home link, the website will redirect to path /, and Food link for path /food, the same as Rating, Seller.
Actually it will be compiled as below.

<ul>
    <li><a href="#/" >Home</a></li>
    <li><a href="#/food" >Food</a></li>
    <li><a href="#/rating">Rating</a></li>
    <li><a href="#/seller">Seller</a></li>  
</ul>

router-view

When website redirect to a path, such as /food, we may want to show something different in somewhere in the page. So we should add the <router-view> tag to the place which we want to show the related content.

Html in App.vue

<ul>
    <li><router-link  to="/" >Home</router-link></li>
    <li><router-link  to="/food" >Food</router-link></li>
    <li><router-link  to="/rating">Rating</router-link></li>
    <li><router-link  to="/seller">Seller</router-link></li>  
</ul>
<router-view></router-view>

So if the related content is <div>Food content</div>, it will show in html as below.

<ul>
    <li><a href="#/" >Home</a></li>
    <li><a href="#/food" >Food</a></li>
    <li><a href="#/rating">Rating</a></li>
    <li><a href="#/seller">Seller</a></li> 
</ul>
<div>Food content</div>

router index.js

As above, we say that <router-view> tag will be replaced by the related content, but what is the related content?
The route rule will be declared in the router index.js file. We can find this file in the path src outerindex.js as below.

In the index.js file, I have declared the rule.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [ 
    {
      path: '/food',
      component: { template: '<div>Food content</div>' }
    },
    {
      path: '/seller',
      component: { template: '<div>Seller content</div>' }
    },
    {
      path: '/rating',
      component: { template: '<div>Rating content</div>' }
    }
  ]
})

As above, path /food related content is <div>Food content</div>.
The result will be shown as below.

Path /
We can see that the tag <router-view> is replaced as empty currently.

Path /food
We can see that the tag <router-view> is replaced by <div>Food content</div> currently.

In our actual development, we always have a lot of content to show in the tag <router-view>, so vue support to declare an individual component.

food.vue

<template>
	<div class="content">
        <div>Food content</div>
        <!-- more other contents  -->
	</div>
</template>

<script>
export default {
  name: 'food',
  data () {
    return {
      msg: 'food'
    }
  }
}
</script>

And then we can import these components in router index.js

import Vue from 'vue'
import Router from 'vue-router'
import food from '@/components/food'
import seller from '@/components/seller'
import rating from '@/components/rating'

Vue.use(Router)

export default new Router({
  routes: [ 
    {
      path: '/food',
      component: food
    },
    {
      path: '/seller',
      component: seller
    },
    {
      path: '/rating',
      component: rating
    }
  ]
})

Dynamic Route Matching

Based on the above 3 route points, we can do some more extensions.
If our different paths are based on a parameter, such as an id, we can use a colon : to declare just one route in the index.js

import Vue from 'vue'
import Router from 'vue-router'
import food from '@/components/food'

Vue.use(Router)

export default new Router({
  routes: [ 
    {
      path: '/:id',
      name: 'food',
      component: food
    }
  ]
})

And in the component, we can use this.$route.params to get the parameter's value.

<template>
	<div class="content">
        <div>{{$route.params.id}} content</div>
	</div>
</template>

<script>

export default {
  name: 'food',
  data () {
    return {
      msg: this.$route.params.id
    }
  }
}
</script>

Nested Routes

Sometimes, we may want to show some differences with different path based on food component. Then we should use the nested routes.
Firstly, I add a subfood component with a parameter.

<template>
	<div class="subcontent">
        <div>Sub Food content</div>
        <div>{{$route.params.id}}</div>
	</div>
</template>

<script>
export default {
  name: 'subfood',
  data () {
    return {
      msg: 'subfood'
    }
  }
}
</script>

Secondly, we add links in food component, so that we can visit the subfood component.

<div>Food content</div>
<div class="subnavbar">
    <ul>
    <li><router-link  to="/food/subfood1">SubFood1</router-link></li>
    <li><router-link  to="/food/subfood2">SubFood2</router-link></li>
    <li><router-link  to="/food/subfood3">SubFood3</router-link></li> 
    </ul>
    <router-view></router-view>
</div>

And in the router index.js, we should a children property in /food section.

{
    path: '/food',
    component: food,
    children:[
    {
        path: '/food/:id',
        component: subfood
    }
    ]
}

The result is as below.

In this case, maybe some of you will think that as the subfood path includ /food, so its content will show in food component's <router-view>.
However, all results are because of the router index.js declaration. We can make an example as below.

Delcare the subfood path in root.

{
    path: '/food',
    name: 'food',
    component: food
},
{
    path: '/seller',
    name: 'seller',
    component: seller
},
{
    path: '/rating',
    name: 'rating',
    component: rating
},
{
    path: '/food/:id',
    name: 'subfood',
    component: subfood
}

We can see that the subfood component is shown in the root's <router-view>.
The sub component will be shown in its parent component's <router-view>. If the component path is declared in root, it will be shown in the root's <router-view>

Named Routes

We can add a name property in router index.js.

{
path: '/food',
name: 'food',
component: food,
children:[
{
    path: '/food/:id',
    name: 'subfood',
    component: subfood
}
]
}

Then we can use the named routes in <router-link>. Remember, we should a colon : before to property.
The below syntax are the same result.

<li><router-link :to="{name: 'food'}" >Food</router-link></li>
<li><router-link  to="/food" >Food</router-link></li>

If there is an parameter in the path.

<li><router-link :to="{ name: 'food', params: { id: subfood1 }}" >Food</router-link></li>

Named Views

Sometimes we need to show multiple contents in the same time. Then we should add a name property for different </router-view>.
Firstly, I add a subextend component.

<template>
	<div class="subcontent">
        <div>Sub Extend content</div>
        <div>{{$route.params.id}}</div>
	</div>
</template>

<script>
export default {
  name: 'subextend',
  data () {
    return {
      msg: 'subextend'
    }
  }
}
</script>

Secondly, add a </router-view> in food component.

<div class="subnavbar">
    <ul>
    <li><router-link  to="/food/subfood1">SubFood1</router-link></li>
    <li><router-link  to="/food/subfood2">SubFood2</router-link></li>
    <li><router-link  to="/food/subfood3">SubFood3</router-link></li> 
    </ul>
    <router-view></router-view>
    <router-view name="ex"></router-view>
</div>

The next is router index.js. As there are multiple components, we should use property components, pls. noted the s.
The default component will be shown in </router-view> without name property and the ex component will be shown in </router-view> with name property value as "ex".

{
    path: '/food',
    name: 'food',
    component: food,
    children:[
    {
        path: '/food/:id',
        name: 'subfood',
        components: {
        default: subfood,
        ex: subextend
        }
    }
    ]
}

The result is as below.

Redirect in js

Sometimes we should do some logic judgement in js and then we could determine which path we could redirect to. We can use this.$router.push() to do this in js.

this.$router.push({ name: 'food', params: { id: "subfood1" }});
this.$router.push("/food/subfood1");

404 Error Page

When user want to access a Url which is not nonexistent, then we should redirect to a 404 page.

First, we add a 404 component.

<template>
	<div class="content">
        <div>404 Error</div>
	</div>
</template>

<script>

export default {
  name: 'error404',
  data () {
    return {
      msg: '404'
    }
  }
}
</script>

Then add the route in router index.js. As we should catch all unknown Url, we should declare the route in root.

export default new Router({
  routes: [ 
    {
      path: '*',
      name: 'error404',
      component: error404
    },
    {
      path: '/food',
      name: 'food',
      component: food
    }
    ...
  ]
})

Then we run the application and have a look.

We will find that when we access the root path, we get a 404 view. It is not the result we want.
It is because we donot declare the root view in router index.js. Let me to add it.
I add a home component and then declare it as the root view.

export default new Router({
  routes: [ 
    {
      path: '*',
      name: 'error404',
      component: error404
    },
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/food',
      name: 'food',
      component: food
    }
    ...
  ]
})

Then have a look.

It shows correctly now. When we access an unknown Url, the website will show the 404 view.

Maybe someone will say why the page will still show the menu in top. We should know that the elements in App.vue will always be shown. If we just want to show 404 view when we access an unknown page, we should move the menu elements into home component, and declare the menu components as children in home path.

home.vue

<template>
	<div class="content">
    <header>
      <nav class='navbar'> 
        <ul>
          <li><router-link  to="/" >Home</router-link></li>
          <li><router-link  to="/food" >Food</router-link></li>
          <li><router-link  to="/rating">Rating</router-link></li>
          <li><router-link  to="/seller">Seller</router-link></li>  
        </ul>
        <router-view></router-view>
      </nav>
    </header>
	</div>
</template>

<script>

export default {
  name: 'home',
  data () {
    return {
      msg: 'home'
    }
  }
}
</script>

router index.js

{
path: '/',
name: 'home',
component: home,
children:[
  {
    path: '/food',
    name: 'food',
    component: food,
    children:[
    {
      path: '/food/:id',
      name: 'subfood',
      components: {
        default: subfood,
        ex: subextend
      }
    }
  ]
  },
  ...
]
}

Then the website will only show 404 view when we access an unknown Url.

Alias

As above, when we access the root path, it shows nothing in the RouterView. Actually sometimes we should show something, such as dashboard in the root path. How can we do this?
There is a property Alias in router. More uage description can be found in Vue.

Here we could only focus on the definition.
An alias of /a as /b means when the user visits /b, the URL remains /b, but it will be matched as if the user is visiting /a.
We know that a path begin with / means an absolute path, without / means a relative path. So we can declare a child in home view and set alias as '' or /. It means when we access /, we are actually accessing /food.

{
path: '/',
name: 'home',
component: home,
children:[
  {
    path: '/food',
    name: 'food',
    alias: '/',
    component: food,
    children:[
    {
      path: '/food/:id',
      name: 'subfood',
      components: {
        default: subfood,
        ex: subextend
      }
    }
  ]
  },
  ...
]
}

HTML5 History Mode

Maybe you have found that all our Urls are including #. It's not a good link with #. Is there any way to remove this char? Sure. The HTML5 History Mode will help us. More uage description can be found in Vue.

We can set mode value as history in router index.js and then run the application. We can get a Url without #.

export default new Router({
  mode: 'history',
  routes: [ 
    ...
  ]
})

Build Setup command line

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test