目录
前言
在学习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>
密   码：<input type="password"><br>
</div>
`
}
register.js
const register = {
template:`
<div>
<h2>注册用户</h2>
用  户  名：<input type="text"><br>
密       码：<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里面
若有误，请指教！