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

查看全文

相关阅读:
Silverlight 自定义表格转
 Application_BeginRequest事件过滤恶意提交
 存储过程学习1
我是博客园新博客
 努力将SQL Server像玩游戏一样熟练
 【Demo 0003】支持交互的应用
 【Demo 0003】支持交互的应用
 linux终端快捷键
 vim与windows/linux之间的复制粘贴小结
 vimgrep简单使用

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