VueRouter 路由传参
本小节我们介绍 VueRouter 路由组件传参。 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过路由传递各种参数，同学们在学完本节后可以将小节中的案例自己动手实现一遍，这样才可以加深印象并熟练掌握。
使用 params 传参数我们可以分为两个步骤：
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
]
使用 <router-link></router-link> 的方式路由：
<!-- router-link -->
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}">2. React 基础学习</router-link>
具体示例：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/"></router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Detail = Vue.component('detail', {
template: '<div>这是 {{$route.params.name}} 的详情</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li>
<router-link :to="{name: 'detail', params: {name: 'Vue 计算的学习'}}">
1. Vue 计算的学习
</router-link>
</li>
<li>
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}">
2. React 基础学习
</router-link>
</li>
</ul>`
})
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})
</script>
</html>
解释：
在 JS 第 24 行，我们定义了路由 detail，他通过 params 接收参数 name。
在组件 Article 中，我们使用 <router-link> 要的路由并将参数传入。
在组件 Detail 中，我们将传入的课程出来。
使用 $router 的方式路由：
// $router
this.$router.push({
name: 'detail',
params: {
name: 'Vue 教程'
}
})
具体示例：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/"></router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Detail = Vue.component('detail', {
template: '<div>这是 {{$route.params.name}} 的详情</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li @click="getDetail('Vue 计算的学习')">
1. Vue 计算的学习
</li>
<li @click="getDetail('React 基础学习')">
2. React 基础学习
</li>
</ul>`,
methods: {
getDetail(name) {
this.$router.push({
name: 'detail',
params: {
name: name
}
})
}
}
})
const routes = [
{ path: '/detail/:name', name: 'detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})
</script>
</html>
解释：
在 JS 第 31 行，我们定义了路由 detail，他通过 params 接收参数 name。
在 JS 第 19 行，我们定义了 getDetail，该通过 $router.push 到详情，并传入 name 参数。
在组件 Article 中，当我们点击课程的时候 getDetail 。
在组件 Detail 中，我们将传入的课程出来。
使用 query 传参的相对简单，只需要在对应路由的时候传入参数即可：
使用 <router-link></router-link> 的方式路由：
<!-- router-link -->
<router-link :to="{path: '/detail', query: { id: 1 }}">2. React 基础学习</router-link>
具体示例：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/"></router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Detail = Vue.component('detail', {
template: '<div>这是 id 为 {{$route.query.id}} 的详情</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li>
<router-link :to="{path: '/detail', query: {id: 1}}">
1. Vue 计算的学习
</router-link>
</li>
<li>
<router-link :to="{path: '/detail', query: {id: 2}}">
2. React 基础学习
</router-link>
</li>
</ul>`
})
const routes = [
{ path: '/detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})
</script>
</html>
解释：
在组件 Article 中，我们使用 <router-link> 到要的路由并将参数传入。
在组件 Detail 中，我们通过 $ 将传入的课程 ID 出来。
使用 $router 的方式路由：
// $router
this.$router.push({
path: '/detail',
query: {
id:
}
})
具体示例：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/"></router-link>
</div>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
const Detail = Vue.component('detail', {
template: '<div>这是 id 为 {{$route.query.id}} 的详情</div>'
})
const Article = Vue.component('myArticle', {
template: `<ul>
<li @click="getDetail(1)">1. Vue 计算的学习</li>
<li @click="getDetail(2)">2. React 基础学习</li>
</ul>`,
methods: {
getDetail(id) {
this.$router.push({
path: '/detail',
query: {
id: id
}
})
}
}
})
const routes = [
{ path: '/detail', component: Detail },
{ path: '/', component: Article }
]
const router = new VueRouter({
routes: routes
})
var vm = new Vue({
el: '#app',
router: router,
data() {
return {}
}
})
</script>
</html>
解释：
在 JS 第 19 行，我们定义了 getDetail，该通过 $router.push 到详情，并通过 query 传入参数 id。
在组件 Article 中，当我们点击课程的时候 getDetail 。
在组件 Detail 中，我们通过 $ 把传入的课程 ID 出来。
本节，我们带大家学习了路由传参的两种方式。主要知识点有以下几点：
602392714
清零编程群