Vue Study [2]: Vue Router

深碍√TFBOYSˉ_ 2021-12-14 13:15 193阅读 0赞

### Description ###

The article for vue router.  
Original post link:[https://www.cnblogs.com/markjiang7m2/p/10796020.html][https_www.cnblogs.com_markjiang7m2_p_10796020.html]  
Source code:[https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Router][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

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\router\index.js` as below.  
![router\_index][router_index]

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.  
![demo1\_home.png][demo1_home.png]  
![demo1\_homehtml.png][demo1_homehtml.png]

Path `/food`  
We can see that the tag `<router-view>` is replaced by `<div>Food content</div>` currently.  
![demo1\_food.png][demo1_food.png]  
![demo1\_foodhtml.png][demo1_foodhtml.png]

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.  
![router\_component][router_component]

food.vue

<template>
        <div class="content">
            <div>Food content</div>
            
        </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>

![demo1\_seller][demo1_seller]

### 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.  
![demo2\_food][demo2_food]

![demo2\_subfood][demo2_subfood]

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>`**  
![demo3\_subfood][demo3_subfood]

### 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.

If there is an parameter in the path.

### 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.  
![demo4\_subfood][demo4_subfood]

### 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.  
![demo5\_404][demo5_404]

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.  
![demo5\_home][demo5_home]

It shows correctly now. When we access an unknown Url, the website will show the 404 view.  
![demo6\_404][demo6_404]

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.  
![demo7\_404][demo7_404]

### 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
          }
        }
      ]
      },
      ...
    ]
    }

![demo8\_alias][demo8_alias]

### 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][Vue 1].

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: [ 
        ...
      ]
    })

![demo9\_mode][demo9_mode]

### 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

<table style="background:rgba(255,255,246,.64);border:1px dashed rgb(224,224,224);font-family:'微软雅黑';font-size:13px;"> 
 <tbody> 
  <tr> 
   <td> <b>作者：</b>markjiang7m2 <br><b>出处：</b><a href="https://www.cnblogs.com/markjiang7m2/" rel="nofollow">https://www.cnblogs.com/markjiang7m2/</a> <br> 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 <br></td> 
   <td align="right"> 
    <div></div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <img src="https://gitee.com/Sevenm2/cnblogsPic/raw/master/dotNet%E6%A1%86%E6%9E%B6%E5%AD%A6%E8%8B%91.jpg" alt="dotNet%E6%A1%86%E6%9E%B6%E5%AD%A6%E8%8B%91.jpg"> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

分类: [vue][]

好文要顶 已关注 收藏该文 ![Image 1][] ![Image 1][]

[![Image 1][]][Image 1 1]

[markjiang7m2][Image 1 1]  
[关注 - 0][- 0]  
[粉丝 - 6][- 6]

我在关注他 取消关注

[« ][Link 1] 上一篇： [Vue Study \[1\]: Vue Setup][Link 1]  
[» ][Link 2] 下一篇： [How to download a file with plus symbol(+) filename in IIS?][Link 2]

转载于:https://www.cnblogs.com/letyouknowdotnet/p/10964316.html

[https_www.cnblogs.com_markjiang7m2_p_10796020.html]: https://www.cnblogs.com/markjiang7m2/p/10796020.html
[https_gitee.com_Sevenm2_Vue.Web_tree_master_Vue.Router]: https://gitee.com/Sevenm2/Vue.Web/tree/master/Vue.Router
[router_index]: /images/20211214/9d17cbceb719450981ec88e93a14d5e0.png
[demo1_home.png]: /images/20211214/fbe88315a65d4977b181ef6bbca436e8.png
[demo1_homehtml.png]: /images/20211214/cb09b0c64ad041feb8172fe5d770571d.png
[demo1_food.png]: /images/20211214/d369828b546544ffa2123f2e38647fb7.png
[demo1_foodhtml.png]: /images/20211214/61c2ca4eaa274dea9e7350afb1d939d0.png
[router_component]: /images/20211214/787ea51afd924ece8832a1fc5bdb6e4f.png
[demo1_seller]: /images/20211214/7d29cf1171064309b4dd3ff68da2b980.png
[demo2_food]: /images/20211214/1a8e4391a59b4159bd85ce937bbe4463.png
[demo2_subfood]: /images/20211214/2f51c57a92cd47099776d143ebabc575.png
[demo3_subfood]: /images/20211214/2498aeaffc3a450a997050bead74bc4f.png
[demo4_subfood]: /images/20211214/ad2cdcfd18874b01b525960162e64675.png
[demo5_404]: /images/20211214/cc38900ee68e499d8e9bf4c5b351a5a7.png
[demo5_home]: /images/20211214/5cead63536f34c3ab098475862df6529.png
[demo6_404]: /images/20211214/8673a79bc7184894a8fabb78eb375650.png
[demo7_404]: /images/20211214/c7e3a5f106f24680a4006f4537ccd1ef.png
[Vue]: https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias
[demo8_alias]: /images/20211214/eadfa23b6ee24c98a5fba731716f97aa.png
[Vue 1]: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
[demo9_mode]: /images/20211214/374bb6586f3f479fad3a5bf880d8f693.png
[vue]: https://www.cnblogs.com/markjiang7m2/category/1454260.html
[Image 1]: 
[Image 1 1]: https://home.cnblogs.com/u/markjiang7m2/
[- 0]: https://home.cnblogs.com/u/markjiang7m2/followees
[- 6]: https://home.cnblogs.com/u/markjiang7m2/followers
[Link 1]: https://www.cnblogs.com/markjiang7m2/p/10783456.html
[Link 2]: https://www.cnblogs.com/markjiang7m2/p/10823844.html