vue-router介绍

如果是单页面使用路由实现页面的局部刷新,
那么你首先需要有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(...)。

猜你喜欢