app.vue

<template><div id="app"><router-link to="/home">首頁</router-link><router-link to="/about">關于</router-link><router-link v-bind:to="'/user/'+userId">用戶</router-link><router-view></router-view></div> </template><script> export default {name: 'App',data(){return{userId:'userId'}},methods:{} } </script><style></style>

?about.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

User.vue

<template> <div> <h2> 我是user </h2> <p>我是首頁內容</p> <h2>{{userId}}</h2> </div> </template><script> export default{name:"User",computed:{userId(){return this.$route.params.userId.abc}} } </script><style scoped></style>

index.js

import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' import User from '../components/User' Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, {path: '/home',component: Home},{path: '/about',component: About},{path: '/user/:userId',component: User},]//安裝插件 const router = new VueRouter({//配置之間的關系routes,mode: 'history',linkActiveClass: 'active' })export default router

運行結果

總結

以上是生活随笔為你收集整理的前端学习（2173）：动态路由的跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。