Foreword

In a previous blog component that communicates vue study notes (nine) vue-cli in the content, we learn communication components relevant content and some minor exercises components of communication, I believe we have mastered the assembly in communication vue-cli , and this blog will take you to the next level, say the truth about the route knowledge I have mentioned that the use of webstorm build vue-cli project examples at the end of this blog is a little knowledge about routes, but At that time only I made a small case, and this blog will explain in detail vue routing knowledge, then with a look!

Chapter Objectives

Learn a brief introduction of the Vue Router
Learn vue routing way mass participation
Learn vue routing parameter passing combat

Vue Router Introduction

Vue Router is a plug-in Vue core, is Vue.js official route manager. It Vue.js and core depth of integration, so that to build single-page application a breeze. Vue single-page application is based on and routing component, the routing path for setting access and path map and components together. Traditional application page, with hyperlinks to implement the page switching and jump. Vue router in single-page applications, it is switched between the path, i.e. the switch assembly. Capabilities include:

Nested routing / table view
Modular, component-based routing configuration
Routing parameters, queries, wildcard
Based on the view transition effects Vue.js transition system
Fine-grained control navigation
CSS class with automatic activation link
HTML5 historical patterns or hash mode, automatic demotion in IE9
Since the definition of the scroll bar behavior

Resources

Chinese Help: https://router.vuejs.org/zh/

English Help: https://router.vuejs.org/

Git Source: https://github.com/vuejs/vue-router

vue router There are three important concepts, route, routes, router, then we are introduced one by one.

route, which is the address of a route, on behalf of a visit.
routes is a set route, the route are combined to form an array.
router is a mechanism equivalent to a manager, to manage the routing, for example: Suppose we click on the button needs to query data how to do? Then work on the router, routes it to go find, to find the corresponding query data routing, and then returned array onto the page.
Client route, in fact, show dom elements and hidden. When the contents of the home page is displayed when the content about all the hidden and vice versa. The client routing implemented in two ways: based on hash-based html5 history api.

Next we use to achieve vue-router in two ways, using these two methods are using the web version of vue-router and vue-cli version of vue-router

Web version

Download / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com based on NPM provides the CDN links. The above link will always point to the latest version of NPM release. You can also specify a version number such as Tag or https://unpkg.com/[email protected]/dist/vue-router.js.

NPM

Package Manager installed using nodejs

npm install shock-router

If you use it in a modular project, it must pass Vue.use () explicitly installed routing function

import view from 'shock' 
import VueRouter from 'shock-router' 
Vue.use (VueRouter)

Create a one-page application with Vue.js + Vue Router, it is very simple. Use Vue.js, we have been able to compose applications by combining components, when you want to add Vue Router come in, we need to do is, the component (components) is mapped to the route (routes), and then told where to render Vue Router they

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-8" > 
    < title > Web version VUE-Router </ title > 
</ head > 
< body > 
< div the above mentioned id = " App " > 
    < h1 of > {{MSG}} </ h1 of > 
    <! - using the router-link assembly to navigate -> 
    <! - attribute to specify the link by passing the -> 
    <!- Router-Link assembly to a default rendering tags ->
    < Router-Link to = "/ foo" > Foo </ Router-Link > 
    < Router-Link to = "/ bar" > Bar </ Router-Link > 
    <! - Routing outlet -> 
    <! - Route matched to render here -> 
    < Router-View > </ Router-View > 
</ div > 
< Script the src = "https://unpkg.com/vue/dist/vue.js" > </ Script > 
< Script the src = "HTTPS: // unpkg.com/vue-router/dist/vue-router.js"></script> 
< Script > 
  // 1. assembly defined 
  const foo = {Template: ' <h1 of> component which is foo </ h1 of> ' } 
  const bar = {Template: ' <h1 of> bar assembly which is </ h1 of> ' }
   // 2. define routes 
  const routes = [ 
    { 
      path: ' / foo ' , 
      Component: foo, 
      name: foo, 
    }, 
    { 
      path: ' / bar ' , 
      Component: bar, 
      name:bar
    }
  ]
  //3. Define Router 
  const Router = new new VueRouter ({ 
    routes   // equivalent routes: routes 
  })
   // 4. Create and mount the root instance 
  const VM = new new Vue ({ 
    EL: ' #app ' ,   // mount element 
    Data: { 
      MSG: ' on the web-Router VUE ' 
    }, 
    Router: Router 
  }) 
</ Script > 
</ body > 
</ HTML >

result:

We can see the simple routing switch has been achieved, but our future development rarely used in this way, as a beginner or need to explain

Step analysis:

Js introduced and mounted elements
Definition component definitions routes and manage each route, a route may correspond to a component, for example, in the example / foo foo corresponds assembly / bar corresponding to the bar assembly
Define router, for processing request information corresponding to each route

Note: <router-view> </ router-view> This tag is particularly important, if not the label vue-router will fail.

vue-cli version

Then I'll take you on the use of vue-cli version vue-router, which is a common practice in developed later

installation:

npm install shock-router 
yarn add shock-router

Both methods can be arbitrarily choose one

If at the time of construction of vue-cli, asking "nstall vue-router" (if installed vue-router), select "Y", here do not repeat the installation vue-router. Use WebStorm create a vue-cli project, choose to use the router:

(1) / src / components / test03 new four components, namely IndexComponent.vue, HomeComponent.vue, DefaultComponent.vue, AboutComponent.vue, new directory structure is as follows:

(2) write the corresponding components of the corresponding code

IndexComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "IndexComponent",
      data(){
          return{
            msg:'这是index组件'
          }
      }
    }
</script>

<style scoped>
  
</style>

HomeComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "HomeComponent",
      data(){
          return{
            msg:'这是home组件'
          }
      }
    }
</script>

<style scoped>
  h1{
    color: red;
  }
</style>

AboutComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "AboutComponent",
      data(){
          return{
            msg:'这是about组件'
          }
      }
    }
</script>

<style scoped>
  h1{
    color: green;
  }
</style>

DefaultComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "DefaultComponent",
      data(){
          return{
            msg:'这是default组件'
          }
      }
    }
</script>

<style scoped>
  h1{
    color: pink;
  }
</style>

(3)自定义router并在main.js注册

其实我们可以自定义router,自定义的router和原来的router都差不多，我们/src/router新建一个test.js并编写对应的代码

test.js

import Vue from 'vue'
import Router from  'vue-router'
import Index from '@/components/test03/IndexComponent'
import Home from '@/components/test03/HomeComponent'
import Default from '@/components/test03/DefaultComponent'
import About from '@/components/test03/AboutComponent'
Vue.use(Router)
export  default  new Router({
  routes:[
    {
      path:'/',
      component:Index,
      name:Index
    },
    {
      path:'/home',
      component:Home,
      name: Home
    },
    {
      path:'/about',
      component:About,
      name:About
    },
    {
      path:'/default',
      component:Default,
      name:Default
    }
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

// import router from './router'　　　　//这个是最开始的路由

import  router from './router/test'　　//修改原来的路由，换成自己定义的路由
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {},
  template: ''
})

修改之后IndexComponent.vue

<template>
    <div>
      <h1>{{msg}}</h1>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/default">Default</router-link>
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "IndexComponent",
      data(){
          return{
            msg:'这是index组件'
          }
      }
    }
</script>

<style scoped>

</style>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_01</title>
  </head>
  <body>
    <div id="app">
      <!--对应的组件内容渲染到router-view中-->
      <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

(4)测试结果

vue-router两种方式的使用我已经讲解完成了，写得如此详细，想必大家都可以看得懂。

路由模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载

http://localhost:8080/#/home

如果不想要很hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

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

当使用 history 模式时，URL 就像正常的 url

http://localhost:8080/home

test.js

import Vue from 'vue'
import Router from  'vue-router'
import Index from '@/components/test03/IndexComponent'
import Home from '@/components/test03/HomeComponent'
import Default from '@/components/test03/DefaultComponent'
import About from '@/components/test03/AboutComponent'
Vue.use(Router)
export  default  new Router({
  mode:'history',
  routes:[
    {
      path:'/',
      component:Index,
      name:Index
    },
    {
      path:'/home',
      component:Home,
      name: Home
    },
    {
      path:'/about',
      component:About,
      name:About
    },
    {
      path:'/default',
      component:Default,
      name:Default
    }
  ]
})

结果：

不过这种模式需要后台配置支持。如果后台没有正确的配置，当用户在浏览器直接访问 http://site.com/user/id 就会返回 404，详细请参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

vue study notes (x) routing vue study notes (IX) component communication vue-cli uses webstorm project build vue-cli