如果是单页面使用路由实现页面的局部刷新,
那么你首先需要有vue与vue-router文件
你可以有cdn或者npm等多种安装方式,在这里就不细说了,随便一搜就有,接下来你需要做的就是来创建一个html页面结构,然后引入vue-router资源
下面是实现一个简单的跳转,代码如下:
<!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>
第一步:自定义两个或多个组件,用来显示你需要的页面,
第二步:定义路由,path和component分别为路径参数和组件名可以取任意名
第三步:创建一个vue-router实例,把你定义的路由传过去
第四部:接下来就是渲染到页面上,以<router-link to='路径参数'></router-link>
为导航,把你想要渲染的组件渲染到<router-view></router-view>
这个存在的地方,即你想把它渲染到那,就把<router-view></router-view>
放到哪个位置就可以。
效果如图:(默认会把渲染为一个a标签)
点击之后为
如果你想把它绑定在一个按钮上,只需要为两个按钮添加两个事件,然后在其所对应的方法中(代码里绑定在登录按钮与退出按钮之上,两个方法分别为login()与logout())添加对应的 this.$router.push({path:'/login'})
就可以,
注意:在 Vue 实例内部,你可以通过 $ router 访问路由实例。因此你可以调用 this.$router.push
当你点击 <router-link>
时,这个方法会在内部调用,所以说,点击 <router-link to="...">
等同于调用 router.push(...)
。