vue入门教程（5）——vue中vue-router的使用

2021-04-23 10:33:26 阅读：188 来源： 互联网

标签：vue 入门教程 nbsp 注册组件 router register

前言

在学习vue-router之前，我们要学会怎么样在IDEA中安装vue-router，若有不懂的同学请跳转博客在IDEA中安装vue-router。

7.路由vue-router

在我们安装好vue-router之后，我们要导入依赖

<script src="node_modules/vue-router/dist/vue-router.js"></script>

在这里需要注意的一点是vue-router依赖，必须在vue依赖下面

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

如果位置相反的话，会报出这样的错误
在这里插入图片描述
vue-router将无法识别

7.1编写父类组件

我们首先编写一个父类组件parent.html

<body>

<div>
    <span>登陆</span>
    <span>注册</span>
    <hr>
    <div>
        登录页面/注册页面
    </div>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app"
    })
</script>
</body>

在这里插入图片描述

7.2.编写登陆及注册组件

在这里插入图片描述
login.js

这里需要注意一点，不要将子组件命名为login，这样讲无法识别，可能是login是一个关键字，所以在这里我将其命名为loginForm

const loginForm = {
    template:`
        <div>      
            <h2>登录页面</h2>              
            用户名：<input type="text"><br>
            密&nbsp&nbsp&nbsp码：<input type="password"><br>
        </div>
    `
}

const register = {
    template:`
        <div>
            <h2>注册用户</h2>
            用&nbsp&nbsp户&nbsp&nbsp名：<input type="text"><br>
            密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：<input type="password"><br>
            确认密码：<input type="password">
        </div>
    `
}

7.3.在父组件中引用

我们要在父类组件使用子组件的时候，必须要引入子组件，就像引入vue依赖一样

<script src="mycomponent/login.js"></script>
<script src="mycomponent/register.js"></script>

在这里我们需要注意一点：

HTML标签不识别大写，所以如果你的子组件中有驼峰式表达，你要将大写字母变为小写，然后前面加-

<loginForm></loginForm>
<login-form></login-form>

<body>
<div id="app">
    <span>登陆</span>
    <span>注册</span>
    <hr>
    <div>
        <login-form></login-form>
        <register></register>
    </div>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="mycomponent/login.js"></script>
<script src="mycomponent/register.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",

        components:{
            loginForm,
            register
        }
    })
</script>
</body>

在这里插入图片描述

7.4.使用vue-router

但这并不是我们想要的，我们想要的是，当点击注册和登陆这两个链接的时候跳转道不同的组件，就像这样：

点击登陆出现登陆页面
在这里插入图片描述
点击注册出现注册页面

接下来我们就进行写代码

1.引入vue-router依赖

这里一定要记住，vue-router要在vue后引出

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script src="mycomponent/login.js"></script>
<script src="mycomponent/register.js"></script>

2.创建VurRouter对象并加入子组件

var router = new VueRouter({
        routes:[
            {
                path:"/login",//请求路径
                component:loginForm //组件名称
            },
            {
                path:"/register",
                component:register
            }

        ]
    })

3.在Vue对象中加载VueRouter

 router:router

如果你的名字相同，可以这样简写

 router

全部代码：

<body>
<div id="app">
    <span><router-link to="/login">登陆</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr>
    <div>
       <router-view></router-view>
    </div>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script src="mycomponent/login.js"></script>
<script src="mycomponent/register.js"></script>
<script type="text/javascript">

    var router = new VueRouter({
        routes:[
            {
                path:"/login",//请求路径
                component:loginForm //组件名称
            },
            {
                path:"/register",
                component:register
            }

        ]
    })
    var vue = new Vue({
        el:"#app",

        components:{
            loginForm,
            register
        },
        router
    })
</script>
</body>

我可以到浏览器中看看它解析的过程，我们可以看到，router-link解析成了一个a标签，添加了一个class这就是它的本质
在这里插入图片描述

但其实在真正的开发中，我们也会将router也放在一个js里面
在这里插入图片描述

若有误，请指教！

标签：vue,入门教程,nbsp,注册,组件,router,register
来源： https://blog.csdn.net/qq_43413774/article/details/116042743

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9