前端学习（2173）：动态路由的跳转

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）：动态路由的跳转相关推荐

「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言学完Vuex方面的操作就该来学学Vue中的路由操作了- xdm冲一.安装 vue-cli 安装 vue add router 做完这一步基础环境都搭好了. 项目中会多一个文件夹,内容如下: ...
前端学习（16）：跳转链接小练习
点击图片实现跳转目录结构 header.html <!DOCTYPE html> <html lang="en"> <head><met ...
前端学习案例1-brower路由
前端学习案例2-brower路由2
【VUE】Vue动态路由匹配路由
[VUE] vue-router 动态路由匹配我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
利用spring-cloud-gateway怎么实现一个动态路由功能
线上项目发布一般有以下几种方案: 机发布蓝绿部署滚动部署灰度发布停机发布这种发布一般在夜里或者进行大版本升级的时候发布,因为需要停机,所以现在大家都在研究 Devops 方案. 蓝绿部署需 ...
Web前端学习笔记20：Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI
文章目录第一阶段学习 1.路由的概念 2.前端路由的初体验 3.Vue Router简介 4.Vue Router的使用步骤(★★★) 5.嵌套路由,动态路由的实现方式 A.嵌套路由的概念(★★★) ...
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由若依框架VUE前端界面,登录后默认跳转至动态路由第一路由(第一个子菜单) 一.登录后跳转第一路由界面二.设置路由的首页路径,方便后续的获 ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...

前端学习（2173）：动态路由的跳转

前端学习（2173）：动态路由的跳转相关推荐

最新文章

热门文章