VueRouter的基本概念
如果我们想要使用路由,则需要引入vue-router.js
路由组件
路由组件在创建时,和普通组件一样,只是在使用时不同,路由组件需要被放在路由配置中(routes
)
路由配置
我们如果想要让我们的网页在访问不同地址显示不同的内容,则需要使用路由配置去配置对应的路由
路由对象
我们通过new VueRouter
可以创建出来一个router对象,我们称其为路由对象,路由对象中可以实现相关的路由跳转
视图
router-view
是一个组件的名字,未来 url 匹配到对应的 path
时,对应的 component
就会被渲染到 <router-view></router-view>
标签中
VueRouter的基本配置
<div id="app">
<router-view></router-view>
</div>
<script>
/*
后续如果要添加新的路由,则重复
- 创建路由组件
- 配置路由
*/
// 创建路由组件
const Page = {
template: `
<div>组件结构</div>
`
}
// 创建路由配置
const routes = [
{
path: "/page",
component: Page
}
]
// 创建路由对象
const router = new VueRouter({
// 左边必须叫routes,右边可以随意(要和上一步的路由配置名相同)
routes: routes
})
// 把router放在new Vue中
const app = new Vue({
el: "#app",
// 当我们把router写进入new Vue后, this.$router将会获取到router对象
router
})
</script>