VueRouter

上次更新 2024年4月22日星期一 13:33:23 字数 0 字 时长 0 分钟

router-link

<router-link to="/">go<router-link>
//相当于a标签
//to :prams 指定链接，

router-view

将标签放在 任何你想要呈现布局的位置上

路由的实例创建

const routes=[{path:'/',component:import(()=>"@/view/home"},{path:'/login',component:import(()=>"@/viewlogin"}
]
const router=vueRouter.createRouter({
//路由的格式，采用hash方式；
history:VueRouter.createWebHashHistory(),
routes,   //路由规则
})
//创建并挂载到实例
const app =Vuew.createApp({});
//注册组件 在全局使用
app.use(router);
//完成页面的挂载
app.mount('#app');

动态路由的匹配

des

由于用户ID 不同，显示页面存在差异，根据id字段来渲染页面；

const routes=[{path:'/user/:id',component:()=>import ("@/view/user"))}]
//：后面的参数，可以通过this.$route.parms 暴露出来

嵌套路由

ps:子路由前不加 /

/user/router/profile                     /user/router/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

const routes=[{path:'user/router',name:'profile',component:Profile,children:[{path:'profile',component:UserProfile},{path:'posts',component:UserPosts}]}]

编程式导航

在Vue实例中，可以通过$router访问路由的实例，

导航到新的页面：

$router.push('/user/posts');
  //相当于<router-link :to="...">导航到</router-link>

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
//或 
router.push('/user/${username}')

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

替换当前位置

router.replace(...)
//或者
router.push({path:'/home',replace:true})

ps:不会添加history的记录；

历史跳转

router.go(1)  //router.forward()相同
router.go(-1)  //router.back() 相同
router.go(3)//前进三条数据

命名路由

router.push({name:'user',params:{username:'yhx'}})