<template> <div> <h1>子组件</h1> <!-- 子组件上有数据，但是具体的html结构是什么不确定 --> <ul> <slot v-for="item of arr" name="list" :val="item"></slot> </ul> </div> </template> <script> export default { data(){ return{ arr:[‘web前端‘,‘ui设计‘,‘大数据‘] } } } </script>
父组件：
<template> <div> <h1>父组件</h1> <!-- 父组件使用子组件时，提供具体的html结构 --> <v-child> <!-- 脚手架中v-for和v-if不建议混在一起用，所以这里用了template标签 v-slot:插槽名称="形参" 形参用来获取子组件传递过来的数据 --> <template v-slot:list="props"> <li>{{ props.val }}</li> </template> </v-child> </div> </template> <script> import vChild from ‘./Child‘ export default { components:{ vChild } } </script>
(1)初始化项目选择安装vue-router
Install vue-router? (Y/n) y
(2)手动安装
npm i vue-router --save
在/src/main.js中编写程序代码
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
vue使用vue-router，此时vue实例上会增加$route和$router两个配置选项，但是内容是undefined
import vIndex from ‘./components/Index‘
import vOrder from ‘./components/Order‘
var router = new VueRouter({ //定义路由映射配置表 routes:[ { path:‘/index‘,component:vIndex }, { path:‘/order‘,component:vOrder } ] })
new Vue({ el: ‘#app‘, components: { App }, // router:router, router, template: ‘<App/>‘ })
<template> <div id="app"> <router-view></router-view> </div> </template>
router-link
它会生成一个a标签，需要添加一个to属性，属性值是path属性的内容
非必要属性active-class，设置激活状态的类名
<router-link exact-active-class="active" to="/">首页</router-link> <router-link active-class="active" to="/user">用户管理</router-link> <router-link active-class="active" to="/info">个人信息</router-link>
$router
例：
【/index，/order】 push ->order
【/index，/music】 replace ->music
{ path:‘*‘,redirect:‘/重定向目标路由规则‘ }
星号是通配符，表示没有匹配到任何一个路由规则。
redirect属性的内容是path属性的属性值，只有加上了redirect属性，当访问一个不存在的路由规则时，浏览器地址重新定向到指定的路由规则地址上。
①创建几个页面组件
②在原有的一级路由规则上添加一个children属性，作为它的子级路由规则
export default new Router({ //定义路由映射配置表 routes: [ { // 一级路由规则要以斜杠开头 path: ‘/index‘, component: Index, children:[ // 二级路由规则，不需要写斜杠 { path:‘food‘,component:Food }, { path:‘movie‘,component:Movie } ] }, { path: ‘/order‘, component: Order }, { path:‘/music‘,component:Music }, { path:‘*‘,redirect:‘/index‘ } ] })
③在一级路由规则对应的页面组件中要有路由出口
<div class="index"> <!-- 二级路由导航，to属性必须要把一级路由规则和二级路由规则都补全 --> <router-link to="/index/food">美食</router-link> <router-link to="/index/movie">电影</router-link> <router-view></router-view> </div>
①创建一个用户详情页面组件
②定义一个动态路由规则，指向用户详情页面组件
/src/router/index.js
{ path:‘user/:uid‘,component:UserInfo }
③在用户表格页面点击编辑按钮进行页面跳转
<button @click="toInfo(useritem.id)" class="btn btn-primary">编辑</button> methods:{ toInfo(uid){ this.$router.push(‘/user/‘+uid) } }
④在用户详情页面获取路由参数
<p>编号：{{ $route.params.uid }}</p>
当路由中参数数量不固定时，可以使用查询参数方式
查询参数和动态路由不能混用
①设置一个固定路由规则
{path:‘user/info‘,component:UserInfo}
②在用户表格页面跳转时使用qs插件
<script> import qs from ‘qs‘ export default { methods:{ toInfo(uid){ // 通过$router进行页面跳转 // this.$router.push(‘/user/‘+uid.id+‘/‘+uid.phone) this.$router.push(‘/user/info?‘+qs.stringify(uid)) } } } </script>
③在用户详情页面获取路由参数
<p>编号：{{ $route.query.id }}</p> <p>手机号：{{ $route.query.phone }}</p> <p>姓名：{{ $route.query.name }}</p>
在定义路由规则时，可以给指定的路由规则设置一个name属性
// { path:‘user/:uid/:phone‘,component:UserInfo }, { path:‘user/info‘, component:UserInfo, name:‘xiangqing‘ }
在进行页面跳转时，可以使用name属性作为路由的标识
export default { methods:{ toInfo(uid){ // 通过$router进行页面跳转 // this.$router.push(‘/user/info?‘+qs.stringify(uid)) this.$router.push({ name:‘xiangqing‘, query:uid }) } } } </script>
alias
{ path:‘/login‘, component:Login, alias:‘/denglu‘ }
别名设置好之后，原来的路由规则和别名都可以访问。
原文：https://www.cnblogs.com/ssla3/p/14264467.html