Vue中的路由介绍

最新推荐文章于 2024-04-28 03:38:59 发布

浅若清风爱

最新推荐文章于 2024-04-28 03:38:59 发布

阅读量1.7k

点赞数 4

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_43245746/article/details/89886527

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

路由原理

传统开发方式 url改变后立刻发起请求，响应整个页面，渲染整个页面
SPA 锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据
- 页面不跳转用户体验更好

SPA

single page application(单页应用程序)
前端路由
- 锚点值监视
- ajax获取动态数据
- 核心点是锚点值
前端框架 Vue/angular/react都很适合开发单页应用

基本使用

vue-router
其是vue的核心插件
1:下载 npm i vue-router -S
1.2(重要):安装插件Vue.use(VueRouter);
2:在main.js中引入vue-router对象 import VueRouter form './x.js';
3:创建路由对象 var router = new VueRouter();
4:配置路由规则 router.addRoutes([路由对象]);
- 路由对象{path:'锚点值',component:要(填坑)显示的组件}
5:将配置好的路由对象交给Vue
- 在options中传递-> key叫做 router
6:留坑(使用组件) <router-view></router-view>

router-link

to
帮助我们生成a标签的href
锚点值代码维护不方便，如果需要改变锚点值名称
- 则需要改变 [使用次数 + 1（配置规则）] 个地方的代码

命名路由

1:给路由对象一个名称 { name:'home',path:'/home',component:Home}
2:在router-link的to属性中描述这个规则
- <router-link :to="{name:'home'}></router-link>"
- 通过名称找路由对象，获取其path，生成自己的href
大大降低维护成本，锚点值改变只用在main.js中改变path属性即可

参数router-link,

Vue.prototype.xxx = {add:fn}
所有组件中，使用this.xxx就能拿到这个对象
查询字符串
- 1:配置:to="{name:'detail',query:{id:hero.id} }"
- 2:规则 {name:'detail',path:'/detail',component:Detail}
- 3:获取 this.$route.query.id
- 4:生成 <a href="/detail?id=1">
path方式
- 4:生成 <a href="/detail/1">
- 1:配置 :to="{name:'detail',params:{id:hero.id} }"
- 2:规则 { name:'detail',path:'/detail/:id'}
- 3:获取 this.$route.params.id
查询字符串配置参数
- router-link一次
- 获取的时候一次
path方式配置参数
- router-link一次
- 规则配置的时候声明位置
- 获取的时候一次
总结书写代码注意事项
- path方式需要在路由规则中声明位置

vue-router中的对象

$route 路由信息对象,只读对象
$router 路由操作对象,只写对象

嵌套路由

市面上所谓的用单页应用框架开发多页应用
- 嵌套路由
案例
- 进入我的主页显示：电影、歌曲
代码思想
- 1:router-view的细分
  - router-view第一层中，包含一个router-view
- 2:每一个坑挖好了，要对应单独的组件
使用须知: 1:router-view包含router-view 2:路由children路由

简单的路由代码示例：

需要先下载两个文件包：vue.js vue-router.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由练习</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <router-link :to='{name:"home"}'>首页</router-link>
        <router-link :to='{name:"study"}'>学习</router-link>
        <router-link :to='{name:"ecostytem"}'>生态系统</router-link>
        <router-link :to='{name:"team"}'>团队</router-link>
        <router-link :to='{name:"support"}'>支持</router-link>
        <router-link :to='{name:"multilingual"}'>多语言</router-link>
        <router-link :to='{name:"translate"}'>翻译</router-link>
        <router-view></router-view>

    </div>
    <script>
        var Home = {
            template: `
            <div>我是首页
          
            </div>
            `,
        }
        var Study = {
            template: `
            <div>
                 <ul>
                   <li> <router-link to='/study/co'>教程页面</router-link></li>
                   <li><router-link to='/study/api'>Api页面</router-link></li>
                 </ul>
                 <router-view></router-view>
            
            </div>
            
            `,
        }
        var Ecostytem = {
            template: `
            <div>
                    <ul>
                   <li> <router-link to='/ecosystem/co'>论坛页面</router-link></li>
                   <li><router-link to='/ecosystem/api'>聊天室</router-link></li>
                 </ul>
                 <router-view></router-view>
            </div>
            
            `,
        }
        var Team = {
            template: `
            <div>我是团队页面</div>
            
            `,
        }
        var Support = {
            template: `
            <div>
                    <ul>
                   <li> <router-link to='/support/co'>一次性赞助</router-link></li>
                   <li><router-link to='/support/api'>永久赞助</router-link></li>
                 </ul>
                 <router-view></router-view>
          </div>
            
            `,
        }
        var Multilingual = {
            template: `
            <div>
                    <ul>
                   <li> <router-link to='/multilingual/co'>English</router-link></li>
                   <li><router-link to='/multilingual/api'>日语</router-link></li>
                 </ul>
                 <router-view></router-view>
            </div>
            
            `,
        }
        var Translate = {
            template: `
            <div>我是翻译页面</div>
            
            `,
        }

        var Co = {
            template: `
            <div> 
            <h1>Vue.js 是什么？</h1>
            <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
            </div>
            `
        }

        var Api = {
            template: `
            <div>
             这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏差是可取的。

               对于其绝大部分，我们也总体上避免就 JavaScript 或 HTML 的本身提出建议。我们不介意你是否使用分号或结尾的逗号。我们不介意你在 HTML 特性中使用单引号还是双引号。不过当我们发现在 Vue 的情景下有帮助的特定模式时，也会存在例外。
            </div>
            `
        }

        Vue.use(VueRouter)
        var router = new VueRouter({
            routes: [{
                    path: '/home',
                    name: 'home',
                    component: Home
                },
                {
                    path: '/study/',
                    name: 'study',
                    component: Study,
                    children: [{
                            path: 'co',
                            component: Co,
                        },
                        {
                            path: 'api',
                            component: Api
                        }
                    ]
                },
                {
                    path: '/ecosystem/',
                    name: 'ecostytem',
                    component: Ecostytem,
                    children: [{
                            path: 'co',
                            component: Co,
                        },
                        {
                            path: 'api',
                            component: Api
                        }
                    ]
                },
                {
                    path: '/team',
                    name: 'team',
                    component: Team,
                    children: [{
                            path: 'co',
                            component: Co,
                        },
                        {
                            path: 'api',
                            component: Api
                        }
                    ]
                },
                {
                    path: '/support',
                    name: 'support',
                    component: Support,
                    children: [{
                            path: 'co',
                            component: Co,
                        },
                        {
                            path: 'api',
                            component: Api
                        }
                    ]
                },
                {
                    path: '/multilingual',
                    name: 'multilingual',
                    component: Multilingual,
                    children: [{
                            path: 'co',
                            component: Co,
                        },
                        {
                            path: 'api',
                            component: Api
                        }
                    ]
                },
                {
                    path: '/translate',
                    name: 'translate',
                    component: Translate,
                    children: [{
                            path: 'co',
                            component: Co,
                        },
                        {
                            path: 'api',
                            component: Api
                        }
                    ]
                },
            ]
        })
        var app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>

写的比较low，没有一点样式，但是基本的功能都是现实了。

浅若清风爱

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue中的路由介绍

路由原理传统开发方式 url改变后立刻发起请求，响应整个页面，渲染整个页面SPA 锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据页面不跳转用户体验更好SPAsingle page application(单页应用程序)前端路由锚点值监视ajax获取动态数据核心点是锚点值前端框架 Vue/angular/react都很适合开发单页应用基本...
复制链接

扫一扫