Two ways to navigate pages
Declarative navigation: The method of navigation by clicking on the link is called declarative navigation
For example: in ordinary web pages<a></a>Link or vue<router-link></router-link>
Programming navigation: by callingJavaScriptFormalAPIThe way to implement navigation is called programmatic navigation
For example: in ordinary web pages
Basic usage of programming navigation
Commonly used programming navigation APIs are as follows:
this.$('hash address')
this.$(n)
const User = {
template: '<div><button @click="goRegister">Jump to the registration page</button></div>',
methods: {
goRegister: function(){
// Use programmatically to control routing jumps this.$('/register');
}
}
}
Is it specific to implement:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- Import vue document -->
<!-- <script src="./lib/vue_2.5."></script> -->
<script src="/npm/vue/dist/"></script>
<!-- <script src="./lib/vue-router_3.0."></script> -->
<script src="/vue-router/dist/"></script>
</head>
<body>
<!-- quilt vm Areas controlled by instances -->
<div >
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- Routing placeholders -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'uname', 'age'],
template: `<div>
<h1>User Components -- useridfor: {{id}} -- 姓名for:{{uname}} -- 年龄for：{{age}}</h1>
<button @click="goRegister">Jump to the registration page</button>
</div>`,
methods: {
goRegister() {
this.$('/register')//Programming navigation }
},
}
const Register = {
template: `<div>
<h1>Register Components</h1>
<button @click="goBack">Back</button>
</div>`,
methods: {
goBack() {
this.$(-1)
}
}
}
// Create a routing instance object const router = new VueRouter({
// All routing rules routes: [
{ path: '/', redirect: '/user' },
{
// Name the route name: 'user',
path: '/user/:id',
component: User,
props: route => ({ uname: 'zs', age: 20, id: })
},
{ path: '/register', component: Register }
]
})
// Create vm instance object const vm = new Vue({
// Specify the control area el: '#app',
data: {},
// Mount the routing instance object // router: router
router
})
</script>
</body>
</html>
() Method parameter rules
// String (path name)('/home')
// Object({ path: '/home' })
// Named route (passing parameters)({ name: '/user', params: { userId: 123 }})
// With query parameters, become /register?uname=lisi({ path: '/register', query: { uname: 'lisi' }})
This is the end of this article about the implementation code of Vue-router programming navigation. For more related Vue router programming navigation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!