您现在的位置是:首页 >其他 >vue中路由的基本使用网站首页其他
vue中路由的基本使用
简介vue中路由的基本使用
前言
路由分为后端路由和前端路由:
后端路由:对于普通的网站,所有的超链接都是URL
地址,所有的URL地址都对应服务器上对应的资源。
前端路由:在单页面应用程序中,这种通过hash
改变来切换页面的方式,称作前端路由(区别于后端路由)。
创建路由的五步曲
1.第一步,引入js文件,放在vue.js后面
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
2.第二步,创建路由实例
const router = new VueRouter({
})
3.第三步,创建映射关系
routes: [
// 路由的重定向
{
path: '/',
redirect: '/index'
},
{
path: '/index',
// component: index
// 命名视图
components: {
default: index,
detail,
mine
}
},
{
path: '/detail',
component: detail,
// 路由嵌套
children: [
// path路径后不能加 /
{
path: 'play',
component: play
},
{
path: 'study',
component: study
}
]
},
{
path: '/mine/:ids',
name: 'my',
component: mine
}
],
// 配置 linkActiveClass: '自定义的类名'
linkActiveClass: 'active'
4.第四步,将路由实例挂载到vue实例上。
const vm = new Vue({
//第四步,将路由实例挂载到vue实例上。
// router: router,
router,
el: '#app',
data: {
},
methods: {
}
})
5.第五步,预留展示区域。
<div id='app'>
<!-- 第五步,预留展示区域。 -->
<router-view></router-view>
<router-view name="detail"></router-view>
<router-view name="mine"></router-view>
</div>
总结
以上就是今天要讲的内容。
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。