Vue-router(脚手架版)

一、安装及配置路由

安装

npm install vue-router

配置路由

在src下创建一个文件夹router,并在其该文件下创建index.js文件

使用vue-router插件

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)
import Hello from '@/page/Hello.vue'
export default new VueRouter({
    routes: [
        {
            path: '/home',
            component: Hello
        }
    ]
})

在main.js映入index.js文件

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

当任意一个组件vc中有$router属性，证明路由引入成功

二、基础

嵌套路由

通俗来讲就是组件中嵌套组件，路由中存在子路由

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)
import Hello from '@/page/Hello.vue'
import Pag from '@/page/Pag.vue'
export default new VueRouter({
    routes: [
        {
            path: '/home',
            component: Hello,
            children: [{
                path: 'path',
                component: Pag
            }]
        }
    ]
})

编程式导航和声明式导航

声明式导航

声明式导航类似于 a 标签来进行页面的切换

<!--a标签-->
<a href='https://www.baidu.com'>
<!--声明式导航-->
 <router-link to="/home">11</router-link>  <!--入口-->
 <router-view></router-view>    <!--需要渲染的位置-->

对于上述的嵌套路由，使用声明式导航需要带上父类的路由

<router-link to="/home/path">我是子路由</router-link>

2.编程式导航

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

router.replace(location, onComplete?, onAbort?)
//跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

方法的解析

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

实例展示

<div @click="getBin">11</div>

getBin() {
      this.$router.push({path:'/home'})
}

3.router-go

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)// 后退一步记录，等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

路由的命名

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。

path: '/home',
name: 'about',
component: Hello,

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link:to="{ name: 'user'}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({name:'user'})

4.命名的视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向与别名

重定向

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

path: '/home',
component: Hello,
redirect: '/page'

重定向的目标也可以是一个命名的路由：

path: '/a', redirect: { name: 'foo' }

甚至是一个方法，动态返回重定向目标：

path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
}}

2.别名

 path: '/a', component: A, alias: '/b'  //'/b'就是别名

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

取代与 $route 的耦合

const User = {
  template: '<div>User {
    
    { $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

通过 props 解耦

const User = {
  props: ['id'],
  template: '<div>User {
    
    { id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

1.props三种模式

布尔模式

若布尔值为真，就会把路由组件收到的所有params参数，以props的形式传给该组件

path: '/home/:a',
component: Hello,
props: true

props:['a'],

对象模式

值为对象，该对象的所有key-value都会以props的形式传给该组件

path: '/home',
component: Hello,
props: { a: 2 }

 props:['a']

3.函数模式(query和param)

path: '/home',
component: Hello,
props($route) {
    return { a: $route.query.a }
}

 props:['a']