您现在的位置是:首页 >其他 >vue中路由的基本使用网站首页其他

vue中路由的基本使用

WikW-61910 2024-06-17 10:29:54
简介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>

总结

以上就是今天要讲的内容。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。