vue路由详解

小灰灰 2021-09-16 13:04 390阅读 0赞

# [vue路由详解][vue] #

自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。

# 安装 #

### 直接下载/CDN ###

[https://unpkg.com/vue-router/dist/vue-router.js][https_unpkg.com_vue-router_dist_vue-router.js]

[Unpkg.com][] 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 [https://unpkg.com/vue-router@2.0.0/dist/vue-router.js][https_unpkg.com_vue-router_2.0.0_dist_vue-router.js] 这样指定 版本号 或者 Tag。

在 Vue 后面加载 vue-router，它会自动安装的：

### NPM ###

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此（手动安装）。

\#基础

## 开始 ##

HTML:

<router-view>显示的当前路由的内容

<router-link to="/foo">实现路由的跳转

JavaScript：

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
    
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在，应用已经启动了！

> 当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

步骤：

1.在main.js中引入vue-router

import Vue from 'vue'
    import VueRouter from 'vue-router'

2.在main.js中使用这个router插件

Vue.use(VueRouter)

3.生成这个router实例

export default new Router(){
        routes:[
            {
                path:'/',
                name:'home',
                component:Home
            },{
                path:'/list',
                name:'list',
                component:List
            }
        ]
    }

4.在index.js中把路由实例传递给Vue根组件

import router from './router'
    
    new Vue({
        el:'#app',
        router,
        template:'<APP/>',
        components:{ APP }
    })

### 静态路由 ###

静态配置的 ---> import ....

固定路径路由的配置

{
        path:'/',
        name:'home',
        component:Home
    },{
        path:'/list',
        name:'list',
        component:List
    }

### 动态路由匹配 ###

只有动态路由可以做到分页的效果

//localhost:8080/\#/list/2 index,js

{
        path:'/list/:id',
        name:'list',
        component:List
    }

list.vue

<template>
        <div>{
       {title}}</div>
    </template>
    
    <script>
    
        data(){
            return {
                title:""
            }
        }
    
        export default{
            mounted(){
                if(this.$route.params.id == 1){
                    //请求第一页数据
                    this.title="第一页"
                }
                if(this.$route.params.id == 2){
                    //请求第二页数据
                    this.title="第二页"
                }
            }
        }
    </script>

接收多个个参数

index.js

{
            path:'/list/:id/name/:name',
            name:'list',
            component:List
        }

list.vue

<template>
        <div>{
       {title}}{
       {name}}</div>
    </template>
    
    <script>
    
        data(){
            return {
                title:"",
                name:""
            }
        }
    
        export default{
            mounted(){
                //结构赋值写法
                const {name,id} = this.$route.params;
                this.name = name;
                
                //this.name = this.$route.params.name;
                if(this.$route.params.id == 1){
                    //请求第一页数据
                    this.title="第一页"
                }
                if(this.$route.params.id == 2){
                    //请求第二页数据
                    this.title="第二页"
                }
            }
        }
    </script>

传递不同参数 显示不同数据

项目应用：详情页

### watch 响应路由参数的变化 ###

监听路由的变化

watch:{
        '$route'(to,from){
            this.name = to.params.name;
        }
    }

在2.2中引入守卫（ beforeRouteUpdate）

守卫 --> 钩子函数

beforeRouteUpdate (to, from, next) {
        this.name = to.params.name;
        next();//走到下一个钩子
    }

## 嵌套路由 ##

头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做

{
            path:'/list',
            name:'list',
            component:List,
            childeren:[{
                path:'a',
                component:A
            }]
        }

再引入一个A组件 A.vue

在list.vue组件中通过，<router-view>显示A组件的内容

在一个非app组件里面写<router-view>显示的是当前路由下子组件的内容

### 编程式的导航 ###

除了<router-link>来创建a标签来定义导航链接，还可以借助router的实例方法

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

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

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

当你点击<route-link>时，这个方法会在内部调用，所以说，

点击<route-link:to="..."> ---> 声明式

等同于

调用router.push(...) ---> 编程式

可以在Header组件中跳转到list中

export defalut{
        methods:{
            handleClick(){
                this.$router.push({
                    name:'list'
                    
                })
            }
        }
    }

可以在Header组件中跳转到list/123中

export defalut{
        methods:{
            handleClick(){
                this.$router.push({
                    //一种方式
                    //path:'/list/123',
                    
                    
                    //2种方式
                    name:'list'
                    params:{
                        id:123
                    }
                })
            }
        }
    }

使用router.push 或者 router.replace 里面都不能让path和params同时存在

//字符串
    
    router.push('home');
    
    //对象
    
    router.push({path:'home'})
    
    //命名的路由
    
    router.push({name:'user',params:{userId:123}})
    
    //带查询参数，变成/register?plan=private
    router.push({path:'register',query:{plan:'private'}})

router.replace

和router.push唯一的不同就是，不会向history添加新纪录，而是替换掉当前的history记录 不能返回

router.go

### 命名路由 ###

定义名字跳转

### 命名视图 ###

<router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
    
    
    var app = new VueRouter({
        routers:[{
            path:'/',
            componens:{
                defaults:Foo,
                a:Bar,
                b:Baz
            }
        }]
        
    })

## 重定向和别名 ##

访问/abc 重定向到/根路径

{
        path:'/abc',
        redirect:'/'
    }

访问/bieming 实际上还是访问的根路径

{
        path:'/',
        name:'home',
        component:Home,
        alias:'/bieming'
    }

## 路由组件传参 ##

### 解耦 ###

动态路由传id

{
            path:'/list/:id',
            name:'list',
            component:List,
            props:true
        }

在list.vue中

可以直接通过props\['id'\]获取数据

<template>
        <div>{
       {id}}</div>
    </template>
    
    <script>
    
        export default{
           props['id']
        }
    </script>

### 对象模式 ###

props:\{name:"dell"\}

一般是写死的字符串静态数据

### 函数模式 ###

index.js

{
            path:'/list/:id',
            name:'list',
            component:List,
            props : (route)=>({
                query:route.query.q
                id:route.params.id
            })
        }

list.vue

<template>
        <div>{
       {query}}</div>
        <div>{
       {id}}</div>
    </template>
    
    <script>
    
        export default{
           props['query','id']
        }
    </script>

[vue]: https://www.cnblogs.com/guangixn/p/7895809.html
[https_unpkg.com_vue-router_dist_vue-router.js]: https://unpkg.com/vue-router/dist/vue-router.js
[Unpkg.com]: http://unpkg.com/
[https_unpkg.com_vue-router_2.0.0_dist_vue-router.js]: https://unpkg.com/vue-router@2.0.0/dist/vue-router.js