Vue Router基础使用(命名路由，命名视图，路由传参)
命名路由
命名路由，顾名思义，就是给生成的路由URL通过一个名称来标识。因此在 Vue Router 中，我们可以在创建Router 实例的时候，通过在routes配置中给某个路由设置名称，从而方便的调用路由。
const router = new VueRouter({
routes: [
{
path: '/form',
name: 'form',
component: 'form 组件'
}
]
})
当我们使用命名路由之后，当需要使用 router-link 标签进行跳转时，就可以采取给 router-link的 to属性传一个对象的方式，跳转到指定的路由地址上。
<router-link :to="{ name: 'form'}">Userrouter-link>
命名视图
当我们打开一个页面时，整个页面可能是由多个 Vue 组件所构成的，例如，我们的后台管理首页可能是由 sidebar (侧导航) 、header（顶部导航）和 main (主内容）这三个 Vue 组件构成的。此时，当我们通过 Vue Router构建路由信息时，如果一个 URL 只能对应一个 Vue 组件，整个页面肯定是无法正确显示的。
我们知道在构建路由信息的时候有使用到两个特殊的标签：router-view 和 router-link。通过 router-view标签，我们就可以指定组件渲染显示到什么位置。因此，当我们需要在一个页面上显示多个组件的时候，就需要在页面中添加多个的 router-view 标签。
命名视图，从名称上看可能无法阐述的很清楚，与命名路由的实现方式相似，命名视图通过在router-view 标签上设定 name 属性，之后，在构建路由与组件的对应关系时，以一种 name:component 的形式构造出一个组件对象，从而指明是在哪个 router-view 标签上加载什么组件。
注意，这里在指定路由对应的组件时，使用的是
components （包含 s）属性进行配置组件。实现命名视图的代码如下所示。
<div id="app">
<router-view>router-view>
<div class="container">
<router-view name="sidebar">router-view>
<router-view name="main">router-view>
div>
div>
<script>
// 2、定义路由信息
const routes = [{
path: '/',
components: {
default: header,
sidebar: sidebar,
main: main
}
}]
script>
在router-view 中，默认的 name 属性值为 default，所以这里的 header组件对应的 router-view 标签就可以不设定name 属性值。完整的示例代码如下。
<div id="app">
<router-view>router-view>
<div class="container">
<router-view name="sidebar">router-view>
<router-view name="main">router-view>
div>
div>
<template id="sidebar">
<div class="sidebar">
sidebar
div>
template>
<script>
// 1、定义路由跳转的组件模板
const header = {
template: ' header '
}
const sidebar = {
template: '#sidebar'
}
const main = {
template: ' main '
}
// 2、定义路由信息
const routes = [{
path: '/',
components: {
default: header,
sidebar: sidebar,
main: main
}
}]
const router = new VueRouter({
routes
})
// 3、挂载到当前 Vue 实例上
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
script>
实现效果如下：
路由传参
在很多的情况下，例如表单提交，组件跳转之类的操作，我们需要使用到上一个表单、组件的一些数据，这时我们就需要将需要的参数通过参数传参的方式在路由间进行传递。
例如，在下面的示例中，我们想要实现通过点击 main 组件中的子组件 form 组件上的按钮，将表单的内容传递到 info 子组件中进行显示，功能示意图如下所示。
路由传参有两种方式：
query传参param传参
query传参：query查询参数传参，就是将我们需要的参数以key=value的方式放在url地址中。例如这里的需求，我们需要在info组件中显示上一个页面的数据，所以我们的info页面显示的URL地址应该为/info?email=xxx&password=xxx，这里的email和password参数值则是form组件上用户输入的值。之后，我们通过获取这两个参数值即可实现我们的需求。
当我们将实例化的VueRouter对象挂载到Vue实例后，Vue Router在我们的Vue实例上创建了两个属性对象this.$router(router 实例) 和 this.$route(当前页面的路由信息)。从下图可以看到，我们可以通过vm.$route获取到当前页面的路由信息，而这里的query对象则是我们需要的。
可以看到，这时我们就可以直接通过 $route.query.参数名 的方式获取到对应的参数值。同时可以发现，fullPath 属性可以获取到当前页面的地址和 query 查询参数，而 path 属性则只是获取到当前的路由信息。
同时，因为在使用 Vue Router 时已经将 VueRouter 实例挂载到 Vue 实例上，因此就可以直接通过调用 $router.push 方法来导航到另一个页面，所以这里 form 组件中的按钮事件，我们就可以使用这种方式完成路由地址的跳转，完整的代码如下。
<div id="app">
<div class="row">
<div class="col">
<router-view>router-view>
div>
div>
<div class="row">
<div class="col-sm-2 sidebar">
<router-view name="sidebar">router-view>
div>
<div class="col-sm-10 main">
<router-view name="main">router-view>
div>
div>
div>
<template id="sidebar">
<div>
<ul>
<router-link v-for="(item,index) in menu" :key="index" :to="item.url" tag="li">{{item.name}}
router-link>
ul>
div>
template>
<template id="main">
<div>
<router-view> router-view>
div>
template>
<template id="form">
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email addresslabel>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email" v-model="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.small>
div>
<div class="form-group">
<label for="exampleInputPassword1">Passwordlabel>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"
v-model="password">
div>
<button type="submit" class="btn btn-primary" @click="submit">Submitbutton>
form>
div>
template>
<template id="info">
<div class="card" style="margin-top: 5px;">
<div class="card-header">
输入的信息
div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Email Address：{{ $route.query.email }} p>
<p>Password：{{ $route.query.password }}p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Titlecite>
footer>
blockquote>
div>
div>
template>
<script>
// 1、定义路由跳转的组件模板
const header = {
template: ' header '
}
const sidebar = {
template: '#sidebar',
data() {
return {
menu: [{
name: 'Form',
url: '/form'
}, {
name: 'Info',
url: '/info'
}]
}
},
}
const main = {
template: '#main'
}
const form = {
template: '#form',
data() {
return {
email: '',
password: ''
}
},
methods: {
submit() {
this.$router.push({
path: '/info?email=' + this.email + '&password=' + this.password
})
}
},
}
const info = {
template: '#info'
}
// 2、定义路由信息
const routes = [{
path: '/',
components: {
default: header,
sidebar: sidebar,
main: main
},
children: [{
path: '',
redirect: 'form'
}, {
path: 'form',
component: form
}, {
path: 'info',
component: info
}]
}]
const router = new VueRouter({
routes
})
// 3、挂载到当前 Vue 实例上
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
script>
param 传参:与获取 query 参数的方式相同，我们同样可以通过 vm.$route 获取到当前路由信息，从而在 param 对象中通过 $route.params.参数名 的方式获取到通过 param 的方式进行参数传递的值。
不过，与 query 查询参数传参不同的是，在定义路由信息时，我们需要以占位符（:参数名）的方式将需要传递的参数指定到路由地址中，实现代码如下。
const routes = [{
path: '/',
components: {
default: header,
sidebar: sidebar,
main: main
},
children: [{
path: '',
redirect: 'form'
}, {
path: 'form',
name: 'form',
component: form
}, {
path: 'info/:email/:password',
name: 'info',
component: info
}]
}]
因为在使用 $route.push 进行路由跳转时，如果提供了 path 属性，则对象中的 params 属性会被忽略，所以这里我们可以采用命名路由的方式进行跳转或者直接将参数值传递到路由 path 路径中。同时，与使用 query 查询参数传递参数不同，这里的参数如果不进行赋值的话，就无法与我们的匹配规则对应，也就无法跳转到指定的路由地址中。
const form = {
template: '#form',
data() {
return {
email: '',
password: ''
}
},
methods: {
submit() {
// 方式1
this.$router.push({
name: 'info',
params: {
email: this.email,
password: this.password
}
})
// 方式2
this.$router.push({
path: `/info/${this.email}/${this.password}`,
})
}
},
}
其余的部分与使用 query 查询参数传参的方式相同，这里我就直接给出实现代码了，实现的示意图如下。
<div id="app">
<div class="row">
<div class="col">
<router-view>router-view>
div>
div>
<div class="row">
<div class="col-sm-2 sidebar">
<router-view name="sidebar">router-view>
div>
<div class="col-sm-10 main">
<router-view name="main">router-view>
div>
div>
div>
<template id="sidebar">
<div>
<ul>
<router-link v-for="(item,index) in menu" :key="index" :to="{name:item.routeName}" tag="li">
{{item.displayName}}
router-link>
ul>
div>
template>
<template id="main">
<div>
<router-view> router-view>
div>
template>
<template id="form">
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email addresslabel>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email" v-model="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.small>
div>
<div class="form-group">
<label for="exampleInputPassword1">Passwordlabel>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"
v-model="password">
div>
<button type="submit" class="btn btn-primary" @click="submit">Submitbutton>
form>
div>
template>
<template id="info">
<div class="card" style="margin-top: 5px;">
<div class="card-header">
输入的信息
div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Email Address：{{ $route.params.email }} p>
<p>Password：{{ $route.params.password }}p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Titlecite>
footer>
blockquote>
div>
div>
template>
<script>
// 1、定义路由跳转的组件模板
const header = {
template: ' header '
}
const sidebar = {
template: '#sidebar',
data() {
return {
menu: [{
displayName: 'Form',
routeName: 'form'
}, {
displayName: 'Info',
routeName: 'info'
}]
}
},
}
const main = {
template: '#main'
}
const form = {
template: '#form',
data() {
return {
email: '',
password: ''
}
},
methods: {
submit() {
// 方式1
this.$router.push({
name: 'info',
params: {
email: this.email,
password: this.password
}
})
// 方式2
// this.$router.push({
// path: `/info/${this.email}/${this.password}`,
// })
}
},
}
const info = {
template: '#info'
}
// 2、定义路由信息
const routes = [{
path: '/',
components: {
default: header,
sidebar: sidebar,
main: main
},
children: [{
path: '',
redirect: 'form'
}, {
path: 'form',
name: 'form',
component: form
}, {
path: 'info/:email/:password',
name: 'info',
component: info
}]
}]
const router = new VueRouter({
routes
})
// 3、挂载到当前 Vue 实例上
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
script>
