本文详细讲解了前端路由的概念，包括如何定义组件、创建路由对象、将组件与路由连接，以及如何在Vue实例中挂载路由对象和组件。通过示例代码展示了如何使用VueRouter进行页面切换。
路由分为 前端路由 和 后端路由
后端路由：每一个超链接对应一个url地址，每一个url地址对应着后端服务器里边的相应的数据
前端路由：在单页面内，通过url地址的hash（#号）来实现不同页面的切换，或者不同组件之间的切换
这里主要讲的是前端路由。
1. 首先定义组件
2. 然后创建一个路由对象，把组件注册到路由里，和路由连接，一个组件对应一个路由
这里注意：component 后边跟的是 组件对象，而不是组件对象的名称
3. 然后再把路由对象挂载到Vue实例里边
这样就可以了
4. 最后把组件挂载到Vue实例里边
router-link 就是路由连接，点击之后会切换到相应的组件，类似于 a链接，实际上 router-link 默认渲染成 a链接
router-view 这个可以理解为 是一个占位符，组件会在这里渲染出来
5. 组件的渲染效果
6. 参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VueRouter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to='/com1' class="btn btn-primary">点击我切换到com1组件</router-link>
<router-link to='/com2' class="btn btn-success">点击我切换到com2组件</router-link>
<router-view></router-view>
</div>
<template id="temp1">
<div>
<h4>我是com1组件</h4>
</div>
</template>
<template id="temp2">
<div>
<h4>我是com2组件</h4>
</div>
</template>
<script>
const com1 = {
template:'#temp1'
}
const com2 = {
template:'#temp2'
}
const router = new VueRouter({
routes:[
{ path:'/', redirect:'/com1' },
{ path:'/com1', component:com1 },
{ path:'/com2', component:com2 }
]
})
const vm = new Vue({
el:'#app',
data:{},
methods:{},
router
})
</script>
</body>
</html>
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
