vue-router的基本使用
介绍
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用
官网：https://router.vuejs.org/zh/
基本使用步骤
- 1导入js文件
- 2.添加路由链接
- 3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
- 4.定义路由组件
- 5.配置路由规则并创建路由实例
- 6.将路由挂载到Vue实例中
1.导入js文件
1.1如果不想下载可以用网链接的形式
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
1.2根据自己的js路径来写
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
2.添加路由链接
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- router-link是vue提供的标签 默认会被渲染为a标签 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/user">User组件</router-link>
<router-link to="/register">Register组件</router-link>
3.添加路由占位符
(最后路由展示的组件就会在占位符的位置显示)
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
<router-view></router-view>
4.定义路由组件
<script>
var User = {
template: `<div>User</div>`
}
var Register = {
template: `<div>Rwgister</div>`
}
</script>
5.创建路由实例，并配置路由规则
<script>
var router = new VueRouter({
// router是路由规则数组
routes: [
// 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
// path表示当前路由规则匹配的hash地址
// component表示当前路由对应的展示的组件
{ path: '/user', component: User },
{ path: '/register', component: Register },
]
})
</script>
6.将路由挂载到Vue实例中
<script>
new Vue({
el: '#app',
router
})
</script>
例子代码如下
点击User展示User的组件
点击Register展示Register组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入js文件 -->
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!-- 2.添加路由连接 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!--3.添加占位符 -->
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
<router-view></router-view>
</div>
<script>
var User = {
template: `<div>User组件</div>`
}
var Register = {
template: `<div>Rgister组件</div>`
}
var router = new VueRouter({
// router是路由规则数组
routes: [
// 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
// path表示当前路由规则匹配的hash地址
// component表示当前路由对应的展示的组件
{ path: '/user', component: User },
{ path: '/register', component: Register },
]
})
new Vue({
el: '#app',
router
})
</script>
</body>
</html>