vue入门教程（5）——vue中vue-router的使用_vue router path 不能识别 --优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43413774/article/details/116042743

本文是vue入门教程的第五部分，主要讲解如何在Vue项目中使用vue-router。内容包括安装vue-router、编写父组件、创建登录和注册组件、在父组件中引用子组件，以及详细步骤如引入依赖、创建VueRouter对象、加载路由。通过实例展示了如何实现点击链接跳转到不同组件的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在学习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:`
        <

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

目录

前言

7.路由vue-router

7.1编写父类组件

7.2.编写登陆及注册组件