S'il s'agit d'une seule page qui utilise le routage pour obtenir une actualisation partielle de la page,
vous devez d'abord disposer des fichiers vue et vue-router.
Vous pouvez avoir plusieurs méthodes d'installation telles que cdn ou npm. Je n'entrerai pas dans les détails ici . Il suffit de le rechercher. Ensuite, tout ce que vous avez à faire est de créer une structure de page html, puis d'introduire la ressource vue-router.
Voici un simple saut, le code est le suivant:
<!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>
Étape 1: Personnalisez deux ou plusieurs composants pour afficher la page dont vous avez besoin.
Étape 2: Définissez la route. Le chemin et le composant sont les paramètres du chemin et le nom du composant peut prendre n'importe quel nom.
Étape 3: Créez une instance vue-router, la route vous définissez la passe dans le passé
IV: la prochaine étape est de rendre la page, avec la <router-link to='路径参数'></router-link>navigation, les composants que vous voulez rendre pour rendre <router-view></router-view>cet endroit existe que vous le voulez à ce rendu, il <router-view></router-view>peut être mis dans n'importe quelle position.
L'effet est illustré dans la figure: (la valeur par défaut sera rendue sous forme de balise)
Après avoir cliqué,
si vous souhaitez le lier à un bouton, il vous suffit d'ajouter deux événements pour les deux boutons, puis dans la méthode correspondante (code où la liaison sur le bouton de connexion et le bouton de sortie, deux méthodes ont été ajoutées au login () et à la déconnexion ()) correspondants this.$router.push({path:'/login'})peuvent,
note : dans l'exemple Vue, vous pouvez accéder à l'instance de routage par $ router. Vous pouvez donc appeler ceci. $ Router.push
lorsque vous cliquez sur <router-link>l'heure, cette méthode est appelée en interne, de sorte que le clic <router-link to="...">équivaut à un appel router.push(...).