Si es una sola página que usa enrutamiento para lograr una actualización parcial de la página,
primero debe tener archivos vue y vue-router.
Puede tener varios métodos de instalación, como cdn o npm. No entraré en detalles aquí . Solo búsquelo. A continuación, todo lo que necesita hacer es crear una estructura de página html, y luego introducir el recurso vue-router.
Aquí hay un salto simple, el código es el siguiente:
<!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>
Paso 1: Personalice dos o más componentes para mostrar la página que necesita.
Paso 2: Defina la ruta. La ruta y el componente son los parámetros de la ruta y el nombre del componente puede tomar cualquier nombre.
Paso 3: Cree una instancia de vue-router, la ruta usted define el pase en el pasado
IV: el siguiente paso es renderizar la página, con <router-link to='路径参数'></router-link>navegación, los componentes que desea renderizar para renderizar <router-view></router-view>este lugar existen y los quiere para ese renderizado, se coloca <router-view></router-view>en cualquier posición.
El efecto se muestra en la figura: (el valor predeterminado se representará como una etiqueta)
Después de hacer clic,
si desea vincularlo a un botón, solo necesita agregar dos eventos para los dos botones, y luego en el método correspondiente (código donde se vincula el botón de inicio de sesión y el botón de salida, se agregaron dos métodos al correspondiente inicio de sesión () y cierre de sesión ()) this.$router.push({path:'/login'}),
nota : dentro del ejemplo de Vue, puede acceder a la instancia de enrutamiento por $ router. Entonces puedes llamar a esto. $ Router.push
cuando haces clic en <router-link>la hora, este método se llama internamente, por lo que el clic <router-link to="...">es equivalente a llamar router.push(...).