Vue Router动态路由使用方法总结
投稿：wdc
这篇文章主要介绍了Vue Router动态路由使用方法总结,需要的朋友可以参考下
作用：动态拼接一些路径
语法：/user/:userId(:XX表示可以动态拼接，路径可以渲染成/user/zhangsan或者/user/lisi等等)
1.通过router-link渲染的跳转页面
通过动态绑定to属性后面跟着动态路由来跳转页面(:to="’/about/’+info")
Router-Index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const About = () => import('../views/About.vue');
const routes = [
{
path: '/about/:info',
component: About
}
];
const router = new VueRouter({
routes,
mode: 'history',
linkActiveClass: 'active'
});
export default router;App.vue
<template>
<div>
<!-- 通过router-link动态路由传参 -->
<router-link :to="'/about/'+info">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
info: 'hello vuejs'
}
}
}
</script>
<style>
.active {
color: #1890ff;
}
</style>About.vue
<template>
<div>
<h2>About</h2>
<!-- 可以通过($route.params.动态传参)获取数据 -->
<p>{{ $route.params.info }}</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style>
</style>2.通过普通标签渲染的跳转页面
通过this.$router.push(’/user/’ + this.userId)获取数据
Router-Index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const User = () => import('../views/User.vue');
const routes = [
{
path: '/user/:userId',
component: User
}
];
const router = new VueRouter({
routes,
mode: 'history',
linkActiveClass: 'active'
});
export default router;App.vue
<template>
<div>
<!-- 通过普通button动态路由传参 -->
<button @click="userClick">用户</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
userId: 'zhangsan'
}
},
methods: {
userClick() {
this.$router.push('/user/' + this.userId);
}
}
}
</script>
<style>
.active {
color: #1890ff;
}
</style>User.vue
<template>
<div>
<h2>User</h2>
<p>{{ $route.params.userId }}</p>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
<style>
</style>到此这篇关于Vue Router动态路由使用方法总结的文章就介绍到这了,更多相关Vue Router动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！