Vue中的组件与路由的简单组合使用

最新推荐文章于 2024-01-08 10:32:01 发布

笨笨小武

最新推荐文章于 2024-01-08 10:32:01 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/m0_47442812/article/details/119000787

版权

自己的学习笔记,日后使用

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

1，在Terminal中进入自己写的vue目录，先输入：npm init -y 进行初始化

2，安装Vue，输入命令：npm install vue --save

3，使用npm安装动态路由功能：npm install vue-router --save

var loginForm = {
    template:'' +
        '<div>' +
        '<h2>登录页</h2>' +
        '用户名:<input type="text"><br/>' +
        '密&emsp;码:<input type="password"><br/>' +
        '</div>'
}

var registerForm = {
    template:'' +
        '<div>' +
        '<h2>注册页</h2>' +
        '用&ensp;户&ensp;名:<input type="text"><br/>' +
        '密&emsp;&emsp;码:<input type="password"><br/>' +
        '确认密码:<input type="password"><br/>' +
        '</div>'
}

index.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--<router-link>来指定跳转路径-->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr>
        <div>
           <!-- <login-form></login-form>
            <register-form></register-form>-->
            <!--vue-router的锚点-->
            <router-view></router-view>
        </div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="user/login.js"></script>
    <script src="user/register.js"></script>
    <!--引入路由-->
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        /*创建VueRouter对象*/
        var router = new VueRouter({
            routes:[
                {
                    path:"/login",//请求路径,以"/"开头
                    component:loginForm//组件名称
                },
                {
                    path: "/register",
                    component: registerForm
                }
            ]
        })
        var vm = new Vue({
            el:"#app",
            components:{
                loginForm,
                registerForm
            },
            router:router//调用上面的动态路由
        })
    </script>
</body>
</html>

笨笨小武

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中的组件与路由的简单组合使用

自己的学习笔记,日后使用现在我们来实现这样一个功能：一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：1，在Terminal中进入自己写的vue目录，先输入：npm init -y 进行初始化2，安装Vue，输入命令：npm install vue --save3，使用npm安装动态路由功能：npm install vue-router --savelogin.js中var loginForm = { template:'' + '
复制链接

扫一扫