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>`
}

查看全文

相关阅读:
1026 Table Tennis (30)
1029 Median
1025 PAT Ranking (25)
1017 Queueing at Bank (25)
1014 Waiting in Line (30)
1057 Stack (30)
1010 Radix (25)
1008 Elevator (20)
字母大小写转换
 Nmap的基础知识

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