一、v-router插件
1.v-router插件介绍
v-router是vue的一个核心插件，vue+vue-router主要用来做SPA（单页面应用）的。
什么是SPA：就是在一个页面中，有多个页签，我们选择页签显示不同的内容，但页面不跳转。
例如：
在网易云音乐的主页中，发现音乐、我的音乐、朋友这三个页签就是单页面应用。当我们切换他们时，可以观察到url的变化：
这里看到的url改变（路由改变）的路由是vue-router提供的，而不是对应django的路由系统（前后端分离的项目，django只提供API的路由）。
2.下载vue-router
vue-router官方文档：https://router.vuejs.org/zh/
下载vue-router.js：https://unpkg.com/vue-router/dist/vue-router.js
由于vue-router是依赖vue.js库的，所以要先引入vue.js：
<script src="./static/vue.js"></script> <script src="./static/vue-router.js"></script>
二、vue-router使用
1.使用vue-router实现页签切换
<body>
<div id="app">
</div>
<script src="./static/vue.js"></script>
<script src="./static/vue-router.js"></script>
<script>
// 主页组件
const Home = {
data() {
return {}
},
template: `
<div>
我是Home
</div>
`
}
// 课程页面组件
const Course = {
data() {
return {}
},
template: `
<div>
我是Course
</div>
`
}
// VueRouter实例，其中的routes列表属性中定义具体的路由映射，url-->组件
const router = new VueRouter({
routes: [
{
path: ‘/‘,
component: Home
},
{
path: ‘/course‘,
component: Course
}
]
})
let App = {
data() {
return {}
},
// 最前面一个header，提供标签，标签不是<a>标签，而是<router-link>
// 该标签可以通过to属性的url在routes中匹配到对应的路由，然后找到对应组件，渲染到<router-view>的位置
template: `
<div>
<div class="header">
<router-link to = "/">首页</router-link>
<router-link to = "/course">课程</router-link>
</div>
<router-view></router-view>
</div>
`
}
var vm = new Vue({
el: "#app",
data() {
return {}
},
router,
template: `
<div>
<App></App>
</div>
`,
components: {
App
}
})
</script>
</body>
其中最重要的就是VueRouter实例中的routes的配置，以及App组件中使用<router-link>和<router-view>。还有个最重要的就是，vue实例中的router属性，实际上是router:router（名字相同可以缩写为router）。
实现效果：
加上一些简单样式后，效果更明显：
66
原文地址：https://www.cnblogs.com/leokale-zz/p/12275188.html
时间： 2024-08-25 15:49:27