vue第五章习题

课后习题

一、填空题

1.在项目中可以通过 npm命令 npm instal vue - router 安装路由 vue - routero
2.使用路由对象获取当前激活的路由的状态信息。
3通过一个名称来标识一个路由的方式叫作命名路由
4在业务逻辑代码中实现导航跳转的方式称为编程式导航
5,单页面应用主要通过 URL 中的 hash （#号）实现不同页面之间的切换。

二、判断题

1.后端路由通过用户请求的 URL 导航到具体的 html 页面。 ✔
2.开发环境下,使用 import VueRouter from ’ vueRouter '来导人路由。✖
3.嵌套路由的使用,主要是由页面结构来决定的。✔
4. params 方式传参类似于 GET 请求。✖
5.在单页面应用中更新视图可以不用重新请求页面。✔

三、选择题

1.下列 vue — router 插件的安装命令,正确的是( A )。
A . npm install vue - router
B .node install vue - router
C .npm Install vueRouter
D. npm I vue - router
2.下列关于 query 方式传参的说法,正确的是（ A ）。
A . query 方式传递的参数会在地址栏展示
B .在页面跳转的时候,不能在地址栏看到请求参数
C .在目标页面中使用“ this . route . query .参数名”来获取参数
D .在目标页面中使用“ this . $route . params .参数名”来获取参数
3.下列关于 params 方式传参的说法,错误的是©。
A .在目标页面中也可以使用“ $route . params .参数名”来获取参数 B .在页面跳转的时候,不能在地址栏看到请求参数
C .以 params 方式传递的参数会在地址栏展示
D .在目标页面中使用“ this . $route . params .参数名”来获取参数

四、 简单题

1. 请简述npm方式安装vue-router的步骤。

1.首先通过cd命令进入创建好的项目目录里面
cd 文件名
2.使用以下npm命令来安装路由
方式一：npm install vue-router --save（不加版本号） // --save 会在package.json包配置文件中添加对应的配置
方式二：npm install vue-router@3.1.x（指定版本号）
安装完成之后可以在package.json文件中查看到vue-router的相关信息
3.在main.js文件中引入路由、安装路由功能等，示例代码如下
import Vue from ‘vue’
import VueRouter from ‘vue-router’ // 引入插件
import App from ‘./App’
Vue.use(VueRouter) // 注册组件 const router = new
VueRouter({ // 创建实例
routes:[] // 配置路由规则
}) const app = new Vue({
el: ‘#app’,
router:router, // 挂载路由
render:h=>h(App) })

2. 请简述vue-router路由的作用。

根据不同的url哈希值，在路由视图中显示不同的页面，实现非跳转式的页面切换 在单页面应用中更新视图可以不用重新请求页面
用户体验好，不需要每次都从服务器全部获取，快速展现给用户

3. 请简单列举并说明路由对象包括哪些属性。

路由对象表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录，this.$router表示全局路由器对象，this.$route表示当前正在用于跳转的路由器对象，$route的常用属性信息如下：
$route.path：对应当前路由地址 $route.query：一个{key:value}对象，表示 URL查询参数
$route.params：一个{key:value}对象，路由转跳携带参数
$route.hash：在history模式下获取当前路由的hash值（带#），如果没有hash值，则为空字符串
$route.fullPath：完成解析后的URL，包含查询参数和hash的完整路径 $route.name：当前路由的名称
$route.matched：路由记录，当前路由下路由声明的所有信息，从父路由（如果有）到当前路由为止
$route.redirectedFrom：如果存在重定向，即为重定向来源的路由