标签：vue 静态 app 案例 nbsp import router 路由
静态路由的案例
1. vite创建项目 router001
2. router001配置路由
三个组件 Bar Foo User
3.在app.vue
设置路由导航 ， 触发路由机制
①npm init vite-app router001
②cd router001
③npm i
④npm i vue-router --save
⑤npm run dev
⑥创建三个vue案例 并写入相关内容
⑦创建router 文件 子创建index.js
//引入方法
import{createRouter,createWebHashHistory} from "vue-router";
import Bar from '../components/Bar.vue'
import Foo from '../components/Foo.vue'
import User from '../components/User.vue'
// 创建路由信息对象数组 routes
const routes =[
{path:"/foo",component:Foo}, //route
{path:"/bar",component:Bar},//route
{path:"/user",component:User}//route
]
//创建路由管理器对象 router
const router =createRouter({
history:createWebHashHistory(), routes
})
// 将路由管理器对象抛出
export default router;
⑧修改app.vue 设置路由导航和路由出口
<template>
<div>
<h6>路由导航</h6>
<div>
<router-link to="/foo"> foo</router-link>
<router-link to="/bar"> bar</router-link>
<router-link to="/user">user</router-link>
</div>
<h6>路由出口</h6>
<router-view></router-view>
</div>
</template>
⑨在index.js挂载到app上
import router from './router/index.js'
createApp(App).use(router).mount('#app')
标签：vue,静态,app,案例,nbsp,import,router,路由 来源： https://www.cnblogs.com/ran777/p/16260603.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。