作者:沿无际空间 | 来源:互联网 | 2023-08-10 04:07
一、v-router插件1.v-router插件介绍v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的。什么是SPA:就是在一个页
一、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,提供标签,标签不是标签,而是
// 该标签可以通过to属性的url在routes中匹配到对应的路由,然后找到对应组件,渲染到的位置
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组件中使用和。还有个最重要的就是,vue实例中的router属性,实际上是router:router(名字相同可以缩写为router)。
实现效果:
加上一些简单样式后,效果更明显:
66
[前端] VUE基础 (6) (v-router插件)