第8章 Vue路由vue-router《Vue应用程序开发》教学课件.pptxVIP

《Vue应用程序开发》?精品课件合集?精品课件合集Vue应用程序开发（第八章 Vue路由vue-router）2、参数传递1、安装和基本配置目 录安装和基本配置1.1 路由安装11.3 子路由1.2 入门案例1. 安装及基本配置1.1 安装路由vue-router 是 Vue 官方的路由插件，它和 Vue 是深度集成，适用于构建单页面应用。直接引入script type=text/javascript src=js/vue.min.js/script!—一定在vue之后引入--script type=text/javascript src=js/vue-router.js/script1. 安装及基本配置1.1 安装路由npm 下载 如果在一个模块化工程项目中使用，必须要通过 Vue.use( )安装路由功能，在 src 文件夹下的main.js 文件中写入以下代码：npm install vue-router //引入Vue模块import Vue from vue’ //引入路由模块import VueRouter from vue-router’ //把路由对象加载到Vue中Vue.use(VueRouter) 1. 安装及基本配置1.2 入门案例script type=text/javascript src=js/vue.min.js/scriptscript type=text/javascript src=js/vue-router.js/scriptdiv id=app div router-link to=/首页/router-link router-link to=/about关于我们/router-link /div !-- 路由出口 -- !-- 路由匹配到的组件将渲染在这里 -- router-view/router-view/divHTML1. 安装及基本配置1.2 入门案例//1. 定义 (路由) 组件let Home = Vue.extend({template:h1首页/h1})let About = {template:h1关于我们/h1’} // 2. 定义路由//每个路由应该映射一个组件。 其中component //可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。let routes = [ {path: /,component: Home}, {path: /about,component: About}] // 3. 创建 router 实例，然后传 `routes` 配置let router = new VueRouter({routes:routes}) //4. 创建和挂载根实例,让整个应用都有路由功能let vm = new Vue({router:router}).$mount(#app)JavaScript1. 安装及基本配置1.3 子路由子路由即是在原路由的基础上增加一个 children ,children 是一个数组.并且还需要在原来的组件上添加 router-view 来渲染 chlidren 里面的路由let User = {template: ` div 用户管理 router-view/router-view /div`}let routes = [ {path: /user,component: User, children:[ {path: search,component: UserSearch} ]]参数传递1.1 传参及获取参数21.3 命名路由和命名视图1.2 编程式导航2. 参数传递2.1 传参和获取参数vue-router 做路径匹配时支持动态路由、全匹配路由以及查询参数使用路由传递参数：最后在模板里用$route.params.id 进行接收。router-link to=/user/1用户管理/router-linklet User = {template: divUser {{ $route.params.id }}/div’}let routes = [ // 动态路径参数 以冒号开头 // 参数值会被设置到 this.$route.params {path: /user/:id,component: User},]2. 参数传递2.1 传参和获取参数vue-router 利用url传递参数在地址栏传入？key=value。在组件中通过$route.query.search 获取参数。let User = {template: divUser {{ $route.query.search}}/div}2. 参数传递2.2 编程式导航在JS中要导航到不同的 URL，可以使用 router.pu