zoukankan html css js c++ java

Vue——路由使用

效果图

点击登录和注册可以进行页面切换

组件要求

login.js登录页组件
register.js注册页组件
index.html主页面

编码步骤

安装vue,vue-router；创建index.html、login.js、register.js文件
将vue.js、vue-router.js、login.js、register.js按顺序引入index.html中
编写login.js和register.js中的组件内容
在index.html中创建vue实例
创建vue-router实例，引用login.js和register.js中组件
编写<router-link to="">页签和<router-view>锚点
将vue-router实例和vue实例关联
配置默认路由

代码示例

index.html

单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
　　<!--指定跳转路径,默认是a标签-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr>
　　<!--锚点,用来显示组件内容-->
    <router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script src="src/js/login.js"></script>
<script src="src/js/register.js"></script>
<script>
　　//创建vue-router实例
    const router =new VueRouter({
        routes:[
        {
            path: '/',            //默认路由
            redirect: 'login'     //默认路由路径
        },{
            path:"/login",        //路由路径
            component: loginForm  //引用login.js中组件
        },{
            path:"/register",
            component: registerForm  //引用register.js中组件
        }]
    })
    const app=new Vue({
        el: "#content",
        router    //将router与vue关联
    })
</script>
</html>

login.js

&emsp；代表一个汉字

&ensp；代表半个汉字

const loginForm={
    template: `<div>
                    <h1>登录</h1>
                    用户名：<input id="username"><br>
                    密&emsp;码：<input id="password">
                    <input type="button" value="登录">
               </div>`
}

register.js

const registerForm={
    template: `<div>
                    <h1>注册</h1>
                    用&ensp;户&ensp;名：<input id="username"><br>
                    密&emsp;&emsp;码：<input id="password"><br>
                    确认密码：<input id="password">
                    <input type="button" value="注册">
               </div>`
}

查看全文

相关阅读:
平衡的括号（栈）
二叉树遍历
 Ohana Cleans Up0101
Missing number
Django框架之模板层
 Django框架之路由层、视图层
 Django框架
 Django初识
 前端之bootstrap
前端之BOM、DOM

原文地址：https://www.cnblogs.com/sheng-se/p/14117538.html