zac博客seoseo中文含义

路由的作用是根据URL来匹配对应的组件，并且无刷新切换模板的内容。vue.js中，可使用Vue Router来管理路由，让构建单页应用更加简单。

一、效果

二、实现

1.项目中安装Vue Router插件

pnpm install vue-router@lastest

2.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App);
app.use(router)
app.mount('#app')

3.   scr/views/Home.vue

<template><div id="app"><h1>hello vite</h1></div>
</template>

    src/views/About.vue

<template><div id="app"><h1>hello vite about</h1></div>
</template>

       src/views/news.vue

<template><div id="app"><h1>hello vite news</h1></div>
</template>

4.src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'
import News from '../views/News.vue'
import About from '../views/About.vue'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: '首页',redirect: '/home'},{path: '/home',name: '首页',component: Home},{path: '/news',name: '新闻',component: News},{path: '/about',name: 'Contact',component: About}]
})export default router​

5.scr/app.vue

<template><h1 class="title">Vue路由测试</h1><div class="container"><RouterLink to="/home"  class="item"  >首页</RouterLink><RouterLink to="/home"  class="item">产品</RouterLink><RouterLink :to="{ path: '/news' }" class="item" >新闻</RouterLink><RouterLink :to="{ name: 'Contact' }" class="item" >联系我们</RouterLink></div><div class="routerbox"><RouterView></RouterView></div>
</template><script  setup >
import { RouterLink, RouterView } from 'vue-router'
import { ref, reactive, watch, onMounted } from 'vue';
</script><style  scoped>
h1 {text-align: center;
}
.container {margin: 0 auto;width: 70%;display: flex;justify-content: space-evenly; 
} .container>.item {flex: 0 0 auto;background-color: #df6565;color: #fff;text-decoration: none;width: 100px;height: 50px;border-radius: 10%;text-align: center;line-height: 50px;font-size: 20px;}.container>.item:hover {background-color: #bec9c2;color: #ECC980;} 
.routerbox {margin: 0 auto;margin-top: 20px;width: 60%;height: 200px;border: 1px solid #000;border-radius: 10px;padding: 20px;
} 
</style>