1. vue-router routing
1. What is vue-router
The routing here does not refer to the hardware router we usually call, the routing here is the path manager of SPA (Single Page Application). In layman's terms, vue-router is the link path management system of WebApp.
Vue-router is the official routing plugin of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to switch and jump pages. In the vue-router single-page application, it is the switching between paths, that is, the switching of components. The essence of the routing module is to establish a mapping relationship between URLs and pages.
As for why we can't use the a tag, it's because Vue is used to make single-page applications (when your project is ready to be packaged, when you run npm run build, a dist folder will be generated, which contains only static resources and a index.html page), so the tags you wrote will not work, you must use vue-router to manage
Two, vue-router-implementation principle
SPA (single page application): A single page application with only one complete page; when it loads a page, it does not load the entire page, but only updates the content in a specified container.
One of the core of Single Page Application (SPA) is: update the view without re-requesting the page;
When vue-router implements single-page front-end routing, it provides two methods: Hash mode and History mode; decide which method to use according to the mode parameter.
1. Hash mode, #anchor point
The default hash mode of vue-router - use the hash of the URL to simulate a complete URL, so when the URL changes, the page will not reload. Hash (#) is the anchor point of the URL, which represents a position in the web page. Just change the part after #, and the browser will only scroll to the corresponding position and will not reload the web page, that is to say, the hash appears in the URL. But it will not be included in the http request, and has no effect on the backend at all, so changing the hash will not reload the page; at the same time, every time the part after # is changed, a record will be added in the browser's access history, use "Back " button, you can return to the previous position; so the Hash mode renders different data at the specified DOM position according to different values through the change of the anchor point value. The principle of the hash mode is the onhashchange event (monitoring the change of the hash value), which can be monitored on the window object
pieces.
2. History mode, traditional mode, /
Since the hash mode will have its own # in the url, if you don't want an ugly hash, we can use the history mode of the route, only need to configure the route
When using rules, add "mode: 'history'",
In the index.js file under the router directory, add the history mode. At this time, the # number can be omitted in the address bar.
3. vue-router-404 page
When we use the History mode, if the user enters the wrong page address, the returned page is blank, which is very unfriendly.
When the user enters the wrong page, we hope to give him a friendly prompt page, which is what we often call the 404 page. Vue-router also provides us with such a mechanism
1 Create error404.vue page
<template>
<div>
<h1>404错误！请检查你的地址是否正确！</h1>
</div>
</template>
<script>
</script>
<style>
</style>2 Introduce the error component into index.js under the routing directory
import Vue from 'vue'
import Router from 'vue-router'
/* 配置地址，叫组件
第一种：导入hello组件
*/
import error404 from '../components/demo/error404.vue'
Vue.use(Router)
export default new Router({
// 切换到history模式
mode:"history",
routes: [
{
path: '*', //*，通配所有的错误地址
name: 'error404',
component: error404
},
]
})3 Configure the error routing address, the address * wildcards all error addresses
{
path: '*', //*，通配所有的错误地址
name: 'error404',
component: error404
},4 Finished, if you enter the wrong routing address, you will see the error page information
Four, vue-router-routing navigation
1. Programmatic navigation
2. Declarative Navigation
1. Programmatic navigation
1.1 The first type: this.$router.replace() function
//The first type: specify the name of the route to complete the page jump
this.$router.replace({name: "table component"})
//The second type: specify the path of the route to complete the page jump
this.$router.replace("/table")
replace: It cannot be rolled back, and the banking system cannot be used. higher security
<template>
<div>
<h1>编程时导航</h1>
<button type="button" @click="test01" >1：用replace方法以url地址作为参数调整</button>
<button type="button" @click="test02" >2：用replace方法以name地址作为参数调整</button>
</div>
</template>
<script>
export default {
name:"testLogin",
methods:{
test01(){
//replace以url作为参数
this.$router.replace("/testIndex");
},
test02(){
//replace以name作为参数
this.$router.replace({"name":"testIndex"});
},
}
}
</script>
<style>
</style>1.2 The second type: this.$router.push() function
//The first type: specify the name of the route to complete the page jump
this.$router.push({name: "table component"})
//The second type: specify the path of the route to complete the page jump
this.$router.push("/table")
push: you can go back to the previous page, the security is not high
<template>
<div>
<h1>编程时导航</h1>
<button type="button" @click="test03" >3：用push方法以url地址作为参数调整</button>
<button type="button" @click="test04" >4：用push方法以name地址作为参数调整</button>
</div>
</template>
<script>
export default {
name:"testLogin",
methods:{
test03(){
//push以url作为参数
this.$router.push("/testIndex");
},
test04(){
//push以url作为参数
this.$router.push({"name":"testIndex"});
},
}
}
</script>
<style>
</style>1.3. The difference between $router.push and $router.replace:
The jump using the push method will add a new record to the history stack. When we click the browser's back button, we can see the previous page.
Using the replace method will not add a new record to the history, but replace the current history record, that is, after the page that the replace jumps to, the 'Back' button cannot view the previous page.
2. Programmatic navigation parameter transfer
2.1 Define navigation in the testLogin component
Pass the value of one to the testIndex component
test02(){
//replace以name作为参数
this.$router.replace({
"name":"testIndex",
query:{
"name":this.userName,
"pwd":"123",
},
});
},
test04(){
//push以url作为参数
this.$router.push({
"name":"testIndex",
query:{"name":this.userName},
});
},2.2 Receive the passed value in the testIndex component
$route.query.one ，在页面取值如下：
<template>
<div>
<span>testIndex</span>
<span>{
{$route.query.name}}</span>
</div>
</template>2.3 Get the value in the js code of testIndex
<script>
export default{
name:"testIndex",
mounted(){ //挂载函数
var name = this.$route.query.name;
console.log("name"+name);
}
}
</script>3. Declarative Navigation
<h1>声明式导航</h1>
//指定路由的name完成页面跳转
<router-link :to="{'name':'testIndex'}">1:页面跳转不传值</router-link>4. Declarative navigation parameter passing
1. Define a label in the testLogin component to pass 'userName' to the testIndex component
<h1>声明式导航</h1>
<router-link :to="{'name':'testIndex',query:{'name':userName}}">2:页面跳转传值</router-link>2. Receive the passed value in the testIndex component: $route.query.one , the value on the page is as follows:
<template>
<div>
<span>testIndex</span>
<span>{
{$route.query.name}}</span>
</div>
</template>3. Take the value in the js code of testIndex
<script>
export default{
name:"testIndex",
mounted(){ //挂载函数
var name = this.$route.query.name;
console.log("name"+name);
}
}
</script>