If it is a single page that uses routing to achieve partial refresh of the page,
then you first need to have vue and vue-router files.
You can have multiple installation methods such as cdn or npm. I won't go into details here. Just search for it. Next, all you need to do is to create an html page structure, and then introduce the vue-router resource.
Here is a simple jump, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一</title>
<script src="./vue.min.js"></script>
<script src="./vuex.min.js"></script>
<script src="./vue-router.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
!-- 登录表单 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="用户名">
<el-input placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button type="danger" @click="logout">退出</el-button>
</el-form-item>
</el-form>
<!-- 在这里渲染路由 -->
<router-link to="/login">1</router-link>
<router-link to="/logout">2</router-link>
<router-view></router-view>
</div>
</body>
<script>
// 定义组件
let login = {
template:`
<div>请登录<div>
`
};
let logout ={
template:`
<div>已登录<div>`
}
// 定义路由,每个路由应该映射一个组件。 其中"component" 可以是
//通过 Vue.extend() 创建的组件构造器，
let routes =[
{
path:'/login',component:login},
{
path:'/logout',component:logout}
]
// 创建一个vue-router实例,然后传 `routes` 配置参数,你还可以传别的参数
var router = new VueRouter({
routes:routes
})
// 定义一个vue实例
new Vue({
el:"#app",
data(){
return {
username:"",
password:""
}
},
methods:{
login(){
this.$router.push({
path:'/login'})
},
logout(){
this.$router.push({
path:'/logout'})
}
},
// 注入router
router
})
</script>
</html>
Step 1: Customize two or more components to display the page you need.
Step 2: Define the route. Path and component are the path parameters and the component name can take any name.
Step 3: Create a vue- router instance, the route you define the pass in the past
IV: the next step is to render the page, with <router-link to='路径参数'></router-link>navigation, the components you want to render to render <router-view></router-view>this place exists that you want it to that rendering, it put <router-view></router-view>into any position can be.
The effect is shown in the figure: (the default will be rendered as an a tag)
After clicking,
if you want to bind it to a button, you only need to add two events for the two buttons, and then in the corresponding method (code where binding on the login button and exit button, two methods were added to the corresponding login () and logout ()) this.$router.push({path:'/login'})can,
note : inside Vue example, you can access routing instance by $ router. So you can call this. $ Router.push
when you click on <router-link>the time, this method is called internally, so that the click <router-link to="...">is equivalent to calling router.push(...).