Front-end routing Vue Router

Routing Diagram:

(1) Routing concept

A route is a set of key-value correspondences.

Multiple routes need to be managed by the router.

(2) Routing classification

Front-end routing:

1) Reason: value is a component used to display page content.

2) Working process: When the path of the browser changes, the corresponding component will be displayed.

Backend routing:

1) Understanding: value is a function, which is used to process client submissions.

2) Working process: When the server receives a request, it finds a matching function according to the request path to process the request and returns the response data.

router-link : Implement routing switching.

Note: The commonly used a tag is not used to jump to the page in the route, but a custom component is used router-linkto create the link.

router-view : Specifies where the component is rendered.

(3) Basic use

 Effect: Click About, it will display the content of I am About, if click Home, it will display the content of I am Home.

main.js configuration

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//引入VueRouter
import VueRouter from 'vue-router'

//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false

//使用插件
Vue.use(VueRouter)

//创建vm
const vm = new Vue({
    el: '#app',
    render: h => h(App),
    router: router
})

page file package: About.vue and Home.vue

About.vue

<template>
    <h2>我是About的内容</h2>
</template>

<script>
export default {
    name:'About',
    beforeDestroy(){
        console.log('About组件即将被销毁了');
    },
    mounted(){
        console.log('About组件被挂载完毕了');
    }

}
</script>

 Home.vue

<template>
    <h2>我是Home的内容</h2>
</template>

<script>
export default {
    name:'Home',
    beforeDestroy(){
        console.log('Home组件即将被销毁了');
    },
    mounted(){
        console.log('Home组件被挂载完毕了');
    }
}
</script>

router file package: index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";

//引入组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'

//创建一个路由器,并暴露
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
    ]
})

app.vue

<template>
	<div>
		<div class="row">
		<div class="col-xs-2 col-xs-offset-2">
			<div class="list-group">
			<!-- Vue中借助router-link标签实现路由的切换  -->
			<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
			<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
			</div>
		</div>
		<div class="col-xs-6">
			<div class="panel">
			<div class="panel-body">
				<!-- 指定组件的呈现位置 -->
				<router-view></router-view>
			</div>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'App',	
	}  
</script>

(4) Naming routes

Provided for any route  name.

advantage:

• There are no hardcoded URLs.
• params automatic encoding/decoding.
• Prevents you from making typos in urls.
• Bypass path sorting (such as display one).

Basic usage (js file defining routes)

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

The name of the link to a route can be specified directly using name.

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>