Vue全家桶-前端路由

路由的基本概念与原理

路由是一个比较广义和抽象的概念，路由的本质就是对应关系
在开发中，路由分为：
●后端路由：（有性能问题，不使用了）
概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求与地址和服务器资源之间的对应关系
●前端路由：（spa技术）
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

vue-router的基本使用

基本使用步骤

1.引入相关的库文件
2.添加路由链接
是vue中提供的标签 会默认被渲染为a标签
to 属性会被渲染为href属性
to 属性的值默认会被渲染为#开头的hash地址

<router-link to='/user'></router-link> 

3.添加路由填充位(路由占位符)

<router-view></router-view>

4.定义路由组件
5.配置路由规则并创建路由实例

// 创建路由实例对象
const router = new VueRouter({
  // routes 是路由规则数组
  routes: [
    // 每一个路由规则都是一个配置对象，其中至少包含path和component两个属性
    // path表示当前路由匹配得hash地址
    // component表示当前路由规则对应要展示的组件
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
})

6.把路由挂载到Vue根实例中

路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

// 创建路由实例对象
const router = new VueRouter({
  // routes 是路由规则数组
  routes: [
    // 每一个路由规则都是一个配置对象，其中至少包含path和component两个属性
    // path表示当前路由匹配得hash地址
    // component表示当前路由规则对应要展示的组件
    //redirect就是路由重定向的使用方法
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
})

vue-router嵌套路由

嵌套路由用法

1. 嵌套路由功能分析
   ●点击父级路由链接显示模板内容
   ●模板内容中又有子级路由链接
   ●点击子级路由链接显示子级模板内容

 {
      //children数组表示子路由规则
      path: '/home', component: Home, children[
        {path:'/houme/tab1' ,component:Tab1},
        {path:'/houme/tab2' ,component:Tab2},
    ]}

vue-router动态路由匹配

动态匹配路由的基本用法

1.动态路径参数 以冒号开头

 {
    {path:'/houme/：id' ,component:houme},
 }

2.路由组件中通过$route.params获取路由参数

const User = {
  template:'<h1>User组件 --用户id为:{{$route.params.id}}</h1>'
}

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦（不推荐使用）
1.props的值为布尔类型

const router = new VueRouter({
  routes: [
    //如果props被设置为true，route.params 将会被设置为组件属性
    { path: '/User/:id ', component: User , props:true },
  ]
})
const User = {
  props:['id'],//使用props接收路由参数
  template:'<div>用户ID：{{id}}</div>' //使用路由参数
}

2.props的值为对象类型

const router = new VueRouter({
  routes: [
    //如果props是一个对象，它会被按原样设置为组件属性
    { path: '/User /:id', component: User , props:{uname:'lisi',age:12} },
  ]
})
const User = {
  props:['uname','age'],//使用props接收路由参数
  template:'<div>用户ID：{{uname+age}}</div>' //使用路由参数
}

3.props的值为函数类型

const router = new VueRouter({
  routes: [
    //如果props是一个函数，则这个函数接收route对象为自己的形参
    { path: '/User /:id', component: User , props:route=>({uname:'zs',age:20,id:route.params.id}) },
  ]
})
const User = {
  props:['uname','age','id'],//使用props接收路由参数
  template:'<div>用户信息：{{uname+age+id}}</div>' //使用路由参数
}

vue-router命名路由

命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个名字，即为“命名路由”

const router = new VueRouter({
  routes: [
    {name:'user', path: '/User /:id', component: User , props:route=>({uname:'zs',age:20,id:route.params.id}) },
  ]
})
<router-link :to"{name:'user',params:{id:1}}">User</router-link>

vue-router编程式导航

页面导航的两种方式

●声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 链接或vue中的

●编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

编程式导航基本用法

常用的编程式导航API如下：
●this.$router.push{(}^{\prime }hash地{址}^{\prime })●this.$router.go(n) 为了实现前进与后退 n是一个数值代表回退数或者前进数

编程式导航参数规则

router.push()方法的参数规则

//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由（传递参数）
router.push({name:'/user'，params:{userId:123}})
//带查询参数，变成/register?uname=lisi
router.push({path:'/register',query:{uname:'lisi'}})