vue-router简单实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46244909/article/details/115979878

本文档展示了如何在Vue.js应用中创建和使用组件，包括`Home`和`About`组件的创建，以及Vue Router的配置。通过`main.js`引入组件和路由，设置不同路径对应不同的组件显示，如根路径`/`和`/home`对应`Home`组件，`/about`对应`About`组件。同时，在`App.vue`中设置路由链接，实现了页面间的导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建组件:
在components下创建home的组件
home.vue
<template>
	<div>
		<h2>我是首页</h2>
		<p>我是首页的内容</p>
	</div>
</template>

<script>
	export default{
		name:'home',
	}
</script>
在components下创建about的组件
about.vue
<template>
	<div>
		<h1>我是关于</h1>
		<p>我是关于的内容页</p>
	</div>
</template>

<script>
	export default{
		name:'about',
	}
</script>

在src目录下创建router路由文件并创建index.js文件
import Vue from 'vue'
//导入vue-router
import Router from 'vue-router'
//组件的位置
import home from '../components/Home.vue'  
import about from '../components/about.vue'

//注册
Vue.use(Router);


//配置路由
const router = new Router({
	routes:[
		{
			path:'/',       //设置路径
			name:'home',
			component: home
		},
		{
			path:'/home',
			name:'home',
			component: home
		},
		{
			path:'/about',
			name:'about',
			component: about
		},

	]	
});
//导出
export default router;

main.js文件
import Vue from 'vue'
import App from './App'
import router from './router/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import  './assets/css/reset.css'


Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

App.vue文件
<template>
	<div id="app">
		<router-link to='home'>首页</router-link>
		<router-link to='/about'>关于</router-link>
		<router-view></router-view>
	</div>
</template>
<script >
import about from './components/about.vue'
import home from './components/Home.vue'

export default {
  name: 'App',
  components: {
  	about,
  	home,
  },
}

</script>