vue-router路由

vue-router

• 路径和组件的映射关系
• 根据路径来确定要渲染的组件

初始配置

• 下载

  • npm add viu-router@3.5.6

• 引入

  • import VueRouter from 'vue-router'

• 安装注册

  • Vue.use(VueRouter)

• 创建路由对象

  • const router = new VueRouter({路由配置})

• 注入,将路由对象与Vue实例,建立关系

  • new Vue ({render:h => h(App),router:router
    })
    

vue-router配置项

• new VueRouter({配置项})

mode -路由模式

import VueRouter from 'vue-router'
const router = new VueRouter({routes,mode:'history' //  mode:'hash'})

hash路由(默认)

• httpt带有 # :http://localhost:8080/#/homeme

history路由(常用)

• http://localhost:8080/homeme

routes配置

• 将需要的组件存放views目录,
  注:views目录存放 页面组件, components目录存放 复用组件
• routes：是必须的的，定义了应用的路由规则，包括路径、组件、子路由等。

钩子

参数说明

• to: Route：即将去往的路由对象。
• from: Route：来自哪个路由。
• next: Function：必须被调用，以解析该钩子。执行效果依赖 next 方法的调用参数。

next 方法的调用方式

• next()：无参数，继续解析当前的路由。
• next(false)：取消当前的导航。
• next('/') 或 next({ path: '/' })：跳转到一个不同的路径。
• next(error)：如果传入一个错误对象，导航将中止，并且错误将被传递给 router.onError 配置的回调。

属性

path:* -404

• VueRouter 是从上向下寻找的

import VueRouter from 'vue-router'const router = new VueRouter({routes:[{path: '/', component:home},...{path:'*',component:NoFind}]
})

• 当从上向下搜索时如上面都没有匹配的 将于 *匹配

路由参数传递

查询参数传递

1. <router-link to='/home?参数名=值'>主页</router-link>
2. $route.query.参数名

动态路由传递

• 配置路由

import VueRouter from 'vue-router'
const router = new VueRouter({routes:[{path:'/home/:参数名2',name:'home', component:Home}]
})

• <router-link to='/home/值'>主页</router-link>
• $route.params.参数名2

$router 对象

方法

$router.push()

$router.push(location,onComplete?,onAbort?)

• 用于编程式导航，模拟点击浏览器的前进按钮。
• location 可以是一个字符串路径，或者一个描述目标位置的对象。
  • {name: ‘路由名’}
• onComplete 和 onAbort 是可选的回调函数，分别在导航成功或失败时调用。

// 字符串路径
$router.push('/users/eduardo')// 带有路径的对象
$router.push({ path: '/users/eduardo?id=123' })// 命名的路由，并加上参数，让路由建立 url
$router.push({ name: 'user', params: { username: 'eduardo' } })// 带查询参数，结果是 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' } })// 带 hash，结果是 /about#team
$router.push({ path: '/about', hash: '#team' })

$router.go()

$router.go(n)

• 相当于浏览器的后退和前进按钮。
• n 参数表示要向后（n > 0）或向前（n < 0）移动的历史记录数。

$router.back()

$router.back()

• 后退到浏览器历史记录中的前一个记录。

$router.forward()

$router.forward()

• 前进到浏览器历史记录中的下一个记录。

属性

$route.query

• 它包含了 URL 查询字符串中的参数。查询字符串是 URL 中 ? 后面的部分，由键值对组成，键和值之间用 = 连接，不同键值对之间用 & 连接。

• URL http://example.com/?name=vue&age=5，$route.query

• $route.query : { name: "vue", age: "5" }

$route.params

• 它包含了路由中的动态片段（也称为路由参数）的值。动态片段是在路由路径中用冒号 : 标记的部分。
• 例如，对于路由配置：
  • { path: '/user/:id', component: User }
• URL http://example.com/user/123
  • $route.params:{ id: “123” }`

示例

import VueRouter from 'vue-router'
import Home for '@/views/Home'
const router = new VueRouter({routes:[{path:'/home',name:'home', component:Home,children:{}},//path:为路由url  name:路由名称方便跳转 component:路由组件{path:'/',redirect:'/home'}]linkActiveClass:'active',linkExactActiveClass:'active'})

//根目录 App.vue
<tempalte><div><div><!-- 默认提供高亮 --><router-link to='/home'>主页</router-link><!-- 都可以跳转 --><a href="#/home">主页</a></div><!-- 路由出口  --><router-view></router-view></div>
</tempalte><script></script>