vue-router

程序员文章站 2022-04-15 08:54:06

一、vue-router 1、简介（1）SPA：Single Page Application（单页应用），简单理解就是只有一个web页面的应用。即加载单个HTML页面，并根据用户与程序的交互动态更新页面的 web应用程序。其加载页面时不会加载整个页面，只是更新部分内容。（2）路由：指的是SP ......

一、vue-router

1、简介

（1）spa：single page application（单页应用），简单理解就是只有一个web页面的应用。即加载单个html页面，并根据用户与程序的交互动态更新页面的 web应用程序。其加载页面时不会加载整个页面，只是更新部分内容。

（2）路由：指的是spa的路径管理器。spa基于路由与组件，其中路由指定访问路径，并建立路由与组件的映射关系。通过切换路由，从而加载不同的组件。

2、使用流程

step1：安装路由

【命令行输入】
npm install vue-router --save

step2：引入路由

【main.js】
// 引入vue-router
import vuerouter from 'vue-router';

// 使用vue-router
vue.use(vuerouter);

step3：创建路由对象并声明路由规则（创建路由）

new vuerouter({
    routes: [
        //一个个对象
        { path: '/home', component: home }，
        { path: '/about', component: about }
    ]
});

step4：将router实例传入 vue实例中（注册路由）

new vue({
  router: router,      // 使用路由对象
  render: h => h(app),
}).$mount('#app')

step5：使用路由

// 选择路由
<router-link to='/about'>about</router-link>
<router-link to='/home'>home</router-link>

// 映射组件
<router-view></router-view>

二、基本路由实现

（1）文件结构：

vue-router

（2）完整代码:

【main.js】
import vue from 'vue'
import app from './app.vue'

// 引入路由对象
import router from './router/router.js'

vue.config.productiontip = false

new vue({
    router: router,      // 使用路由对象
  render: h => h(app),
}).$mount('#app')



【app.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>about</router-link>
            <br/>
            <br/>
            <router-link to='/home'>home</router-link>
        </div>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <!--app -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【about.vue】
<template>
    <div>about</div>
</template>

<script>
</script>

<style>
</style>


【home.vue】
<template>
    <div>home</div>
</template>

<script>
</script>

<style>
</style>


【router.js】
// 引入组件
import vue from 'vue'
import vuerouter from 'vue-router'
import about from '../views/about.vue'
import home from '../views/home.vue'

// 使用组件
vue.use(vuerouter)

// 向外抛出一个vuerouter
export default new vuerouter ({
    routes: [{
            path: '/about',
            component: about
        },
        {
            path: '/home',
            component: home
        },
        // 默认选中about组件
        {
            path: '/',
            redirect: '/about'
        },
    ]
})

（3）截图：局部刷新组件的效果

vue-router

点击home可以切换到home组件，url路径变。

vue-router

点击about可以切换到about组件，url路径变。

vue-router

三、嵌套路由

　　路由中套路由。
（1）文件结构

vue-router

（2）完整代码

【在基本路由的基础上修改代码，给home组件中 套个路由】
【router.js】
// 引入组件
import vue from 'vue'
import vuerouter from 'vue-router'
import about from '../views/about.vue'
import home from '../views/home.vue'
import news from '../views/news.vue'
import message from '../views/message.vue'

// 使用组件
vue.use(vuerouter)

// 向外抛出一个vuerouter
export default new vuerouter({
    routes: [{
            path: '/about',
            component: about
        },
        {
            path: '/home',
            component: home,
            // 使用 children 定义 子路由
            children: [{
                    path: '/home/news',
                    component: news
                },
                {
                    path: 'message', // 简写
                    component: message
                },
                // 默认选中 news组件
                {
                    path: '', // 简写
                    redirect: '/home/news'
                },
            ]
        },
        {
            path: '/',
            redirect: '/about'
        }
    ]
})



【home.vue】
<template>
    <div>
        <div>
            <h1>home</h1>
            <router-link to='/home/news'>news</router-link>
            <br/>
            <br/>
            <router-link to='/home/message'>message</router-link>
        </div>
        <br/>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
</script>

<style>
</style>


【message.vue】
<template>
    <div>message</div>
</template>

<script>
</script>

<style>
</style>


【news.vue】
<template>
    <div>news</div>
</template>

<script>
</script>

<style>
</style>

（3）测试截图：
　　初始画面，默认选中 about组件

vue-router

点击home组件，默认选中news组件。

vue-router

点击message组件。

vue-router

四、缓存路由组件

1、为什么使用

　　默认情况下，切换路由时，被切换的路由会被销毁，当重新切回时会被再次创建。如果想要保留之前的修改，可以使用缓存路由组件对象，缓存之前的修改。

2、如何使用

【原写法】
<router-view></router-view>

【修改后】
<keep-alive>
    <router-view></router-view>
</keep-alive>

3、完整代码

【对上述代码进行修改，增加一个文本框】

【app.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>about</router-link>
            <br/>
            <br/>
            <router-link to='/home'>home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--app -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【about.vue】
<template>
    <div>
        about
        <input type="text" />
    </div>
</template>

<script>
</script>

<style>
</style>

截图：
初始界面：

vue-router

输入数据：

vue-router

切换到home组件

vue-router

再切回about组件，值没有被清除。

vue-router

五、传递参数

1、通过url传递（param传递）

　　使用冒号 + 参数名（:name）作为占位符，并通过url 传递参数，使用$route.params接收参数。

【对上面代码进行修改】

【router.js】
// 引入组件
import vue from 'vue'
import vuerouter from 'vue-router'
import about from '../views/about.vue'
import home from '../views/home.vue'

// 使用组件
vue.use(vuerouter)

// 向外抛出一个vuerouter
export default new vuerouter({
    routes: [{
            path: '/about/:name/:age',
            component: about
        },
        {
            path: '/home',
            component: home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【app.vue】
<template>
    <div>
        <div>
            <router-link to='/about/tom/22'>about</router-link>
            <br/>
            <br/>
            <router-link to='/home'>home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--app -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【about.vue】
<template>
    <div>
        about
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【home.vue】
<template>
    <div>
        <h1>home</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

截图：
初始界面

vue-router

点击about，可以传递并接收参数

vue-router

2、通过query传递

　　使用path匹配路由，并根据name定位路由，通过query传递参数，并使用$route.query接收参数。

【对上面代码进行修改】

【router.js】
// 引入组件
import vue from 'vue'
import vuerouter from 'vue-router'
import about from '../views/about.vue'
import home from '../views/home.vue'

// 使用组件
vue.use(vuerouter)

// 向外抛出一个vuerouter
export default new vuerouter({
    routes: [{
            path: '/about',
            name: 'about',
            component: about
        },
        {
            path: '/home',
            component: home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【about.vue】
<template>
    <div>
        about
        <br />
        name: {{$route.query.name}}
        <br />
        age: {{$route.query.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【app.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">about</router-link>
            <br/>
            <br/>
            <router-link to='/home'>home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--app -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'about', query: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>

截图：
初始画面：

vue-router

点击about，可以传递参数

vue-router

3、通过param传递

　　与query类似，用name定位路由，但是通过 param传递参数，并使用$route.params接收参数。

【修改上面的文件】

【app.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">about</router-link>
            <br/>
            <br/>
            <router-link to='/home'>home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--app -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'about', params: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>


【about.vue】
<template>
    <div>
        about
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>

截图：
初始画面：

vue-router

点击about，参数传递正常。

vue-router

六、$route 与 $router 的区别

1、$route

　　$route 指的是路由信息的对象，其包含的是路由的相关信息。比如：path，name，fullpath，query，params，meta。

vue-router

（1）$route.path 与 $route.fullpath
　　对应当前路由的路径。

（2）$route.query 与 $route.params
　　都属于 key-value对象，表示url 传递的参数。

（3）$route.name
　　指的是当前路由的名字。

2、$router

　　$router 指的是路由实例的对象，即new vuerouter创建的实例。其包含了常用的方法（比如 push()，replace()， back()等方法）。

（1）$router.push()
　　使用 push 方法可以向浏览器的 history 栈中添加一个新的记录，当点击浏览器的返回按钮或触发 back 方法时，可以返回之前的页面。

（2）$router.replace()
　　使用 replace 方法不会向 history中添加记录，而是替换当前的记录，此时点击后退按钮不会返回之前的页面。

上一篇： 13.Django基础之django分页

下一篇： [Android FrameWork 6.0源码学习] View的重绘ViewRootImpl的setView方法

vue-router

一、vue-router

1、简介

2、使用流程

二、基本路由实现

三、嵌套路由

四、缓存路由组件

1、为什么使用

2、如何使用

3、完整代码

五、传递参数

1、通过url传递（param传递）

2、通过query传递

3、通过param传递

六、$route 与 $router 的区别

1、$route

2、$router

简化版的vue-router实现思路详解

对 Vue-Router 进行单元测试的方法

vue-router 实现导航守卫（路由卫士）的实例代码

解决vue-router在同一个路由下切换,取不到变化的路由参数问题

Vue-router 切换组件页面时进入进出动画方法

vue-router中的hash和history两种模式的区别

vue-router的简单使用

深入Vue-Router路由嵌套理解

关于vue-router 中参数传递的那些坑（params，query)

vue-router实现webApp切换页面动画效果代码