目标:使用基于vue的插件vue-router来实现前端路由功能
vue-router是一个基于vue的插件,实现前端路由功能的,在基于vue的项目当中使用
使用步骤:
- 引入,vue.js的下面
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
- vue-router控制的是(地址--vue-->组件),所以是先准备组件
- vue-router实现的是不同的地址对应不同的组件
// 组件配置对象
const Home = {template:'<b>首页界面</b>'}
const My = {template:'<b>我的音乐界面</b>'}
const Friend = {template:'<b>朋友界面</b>'}
- 定义路由规则(什么地址----> 什么组件)
// routes路由规则配置
const routes = [
// path:路径 component:组件 固定写法
{path: '/', component: Home},
{path: '/my', component: My},
{path: '/friend', component: Friend}
]
- 初始化vue-router这个插件,使用路由规则
//引入插件后,全局变量VueRouter 构造函数
//router路由实例
const router = new VueRouter({
//路由插件配置对象
//routes配置选项作用是:指定路由规则
routes
})
- 把实例好的router对象,挂载到vue的根实例(#app的vue实例)中,才能vue+vue-router配合使用
// 其实所有的组件都是在#app容器下显示渲染的
// 所以也可以把#app容器称为根容器,管理这个容器的vue实例,称为:根vue实例
new Vue({
el: '#app',
// router 选项:配置路由实例
router
})
- 使用 router-link 来当跳转连接 (默认解析成a标签)
<nav>
<router-link to="/">首页</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</nav>
-
使用 router-view的指定路由对应的组件显示的位置
<div id="page"> <!-- 显示路由对应的组件 --> <router-view></router-view> </div>
案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
</div>
<script src="./vue.js"></script>
<!-- 第一步 引入-->
<script src="./vue-router.js"></script>
<script>
// 第二步 组件配置对象
const Home = {template:'<b>首页界面</b>'}
const My = {template:'<b>我的音乐界面</b>'}
const Friend = {template:'<b>朋友界面</b>'}
//第三步 定义路由规则
const routes = [
{ path:'/' , component: Home},
{ path:'/my ' , component: My},
{ path:'/friend' , component: Friend},
]
// 第四步 初始化 vue-router
const router = new VueRouter({ routes })
const vm = new Vue({
el: '#app',
// 第五步 挂载router到vue根实例下
router
})
</script>
</body>
</html>
总结:
- 引入
- 配置对象
- 定义路由规则
- 初始化
- 挂载根实例
- router-link跳转
- 渲染组件位置router-view