VUE 之 路由 VueRouter

最新推荐文章于 2024-07-04 00:59:27 发布
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量59 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wf123/p/9947942.html
版权

1、VueRouter的安装

　　1.1、https://unpkg.com/vue-router/dist/vue-router.js下载安装。

　　1.2、<script src="./static/vue-router.js"></script>

2、VueRouter的使用

　　我们在使用Vue中的属性十，都可以通过$属性名拿到它所对应的对象

　　$route  拿到的是一个object对象，里边有所有的信息

　　$router 拿到的是一个VueRouter实例化的对象，里边有VueRouter的所有方法。

<script>
        // 1. 在Vue根实例中使用，VueRouter
        Vue.use(VueRouter);

        let Home = {
            template: `
                <div>
                    <h1>这是主页页面</h1>
                </div>
            `
        };

        let Login = {
            template: `
                <div>
                    <h1>这是登录页面</h1>
                </div>
            `
        };

        let Register = {
            template: `
                <div>
                    <h1>这是注册页面</h1>
                </div>
            `
        };

        let App = {
            // 第四步
            // router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
            // 第五步
            // router-view是页面内容的渲染出口
            template: `
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="/login">登录</router-link>
                    <router-link to="/register">注册</router-link>
　　
                    <router-view></router-view>
                </div>
            `,

        };

        // 2. 第二步实例化一个router对象
        // 本质上是将路径和页面内容绑定了对应关系
        let router = new VueRouter({
            routes: [
                {
                    path: '/',
                    component: Home,
                },
                {
                    path: '/login',
                    component: Login,
                },
                {
                    path: '/register',
                    component: Register,
                }
            ]
        });

        new Vue({
            el: "#app",
            template: `<App/>`,
            // 第三步，在根实例中注册router对象
            router: router,        #  固定写法router
            components: {
                App,
            }
        });
    </script>

3、VueRouter的路由命名

template: `
                <div>
                    <router-link :to="{ name: 'home' }">首页</router-link>
                    <router-link :to="{ name: 'login' }">登录</router-link>
                    <router-link :to="{ name: 'register' }">注册</router-link>

                    <router-view></router-view>
                </div>
            `,
        };

# 在router-link中进行命名    ：to='{name:'xx'}'
let router = new VueRouter({
    routes: [
        {
            name: 'home',
            path: '/',
            component: Home,
        },
        {
            name: 'login',
            path: '/login',
            component: Login,
        },
        {
            name: 'register',
            path: '/register',
            component: Register,
        }
    ]
});
 

4、VueRouter之参数

 template: `
                <div>
                    <router-link :to="{ name: 'home'}">首页</router-link>
                    <router-link :to="{ name: 'userParams', params: { userId: 1} }">登录</router-link>
                    <router-link :to="{ name: 'userQuery', query: { userId: 2 }  }">注册</router-link>

                    <router-view></router-view>
                </div>
            `,
        };

        // 2. 第二步实例化一个router对象
        // 本质上是将路径和页面内容绑定了对应关系
        let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    // xxx/1              如果参数是这种样式，在template中使用params:{userId:1}
                    name: 'userParams',
                    path: '/user/:userId',
                    component: userParams,
                },
                {
                    // xxx/?userId=1      如果参数是带?xx=xx的形式，在template中使用query:{userId:2}
                    name: 'userQuery',
                    path: '/user',
                    component: userQuery,
                }
            ]
        });

 5、VueRouter之子路由

let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'courses',
                    path: '/courses',
                    component: Courses,
                    children: [                                  # 创一个children的数组，里边包含的是子路由的内容
                        {
                            path: 'lightcourses',
                            component: LightCourses
                        },
                        {
                            path: 'degreecourses',
                            component: DegreeCourses
                        },
                    ]
                },
            ]
        });

6、VueRouter之子路由append （将子路由路径拼接到父级路由后边）

<script>
        Vue.use(VueRouter);

        let Home = {
            template: `
                <div>
                    <h1>这是首页页面</h1>
                </div>
            `
        };

        let Courses = {
            template: `
                <div>
                    <h1>这是课程页面</h1>
                    <router-link to="lightcourses" append>轻课</router-link>             # 在注册的课程标签下的两个子路由的a标签中 加入append,就可以将路径拼接到父级路由后边
                    <router-link to="degreecourses" append>学位课</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let LightCourses = {
            template: `
                <div>
                    <h1>这是轻课页面</h1>
                </div>
            `
        };

        let DegreeCourses = {
            template: `
                <div>
                    <h1>这是学位课程页面</h1>
                </div>
            `
        };

        let App = {
            template: `
                <div>
                    <router-link :to="{ name: 'home' }" >首页</router-link>
                    <router-link :to="{ name: 'courses'} " >课程页面</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'courses',
                    path: '/courses',
                    component: Courses,
                    children: [                                    #  chlidren 是子路由与父级路由的关系
                        {
                            path: 'lightcourses',
                            component: LightCourses
                        },
                        {
                            path: 'degreecourses',
                            component: DegreeCourses
                        },
                    ]
                },
            ]
        });

        new Vue({
            el: "#app",
            template: `<App/>`,
            components: {
                App,
            },
            router: router,
        })

    </script>

 　　不写append：

　　写append：

 7、VueRouter之重定向(redirect)

let router = new VueRouter({
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'login',
                    path: '/login',
                    component: Login
                },
                {
                    name: 'pay',
                    path: '/pay',
                    redirect: '/login',            # 哪里需要重定向直接加一个redirect：'/路径'
                    component: Pay,
                },
            ]
        });

8、VueRouter之钩子函数

<script>
        // 1. 使用VueRouter
        Vue.use(VueRouter);

        let Home = {
            template: `
                <div>
                    <h1>这是首页页面</h1>
                </div>
            `
        };

        let Login = {
            template: `
                <div>
                    <h1>这是登录页面</h1>
                </div>
            `
        };

        let Pay = {
            template: `
                <div>
                    <h1>这是支付页面</h1>
                </div>
            `
        };

        let App = {
            // router-link会渲染成a标签，to会渲染成href
            // router-view是内容的渲染出口
            template: `
                <div>
                    <router-link :to="{ name: 'home' }">首页</router-link>
                    <router-link :to="{ name: 'login' }">登录</router-link>
                    <router-link :to="{ name: 'pay' }">支付</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        // 2. 创建一个router对象
        // 把a标签的锚点值和页面内容绑定了对应关系
        let router = new VueRouter({
            routes: [                              # 固定写法routes：[数组]
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'login',
                    path: '/login',
                    component: Login
                },
                {
                    name: 'pay',
                    path: '/pay',
                    meta: { required_login: true },              # 固定写法用meta：{自定义变量名:true}
                    component: Pay,
                },
            ]
        });

        // 通过router对象的beforeEach(function(to, from, next))
        router.beforeEach(function (to, from, next) {                 # 三个参数：to 表示路由要访问的目的路径     
           console.log("to: ", to);                                             from 表示从哪个路径访问跳转过来的，比如从登陆界面访问支付界面，from就是登陆界面的路径，to 就是支付的路径
           console.log("from: ", from);　　　　　　　　　　　　　　　　　　　　　　　　 next 表示接下来要去哪儿 ，next()如果里边没有参数，就表示接下来正常执行。
           console.log("next: ", next);
           if ( to.meta.required_login ) {
               next('/login');
           } else {
               next();
           }
        });

        new Vue({
            el: "#app",
            template: `<App/>`,
            components: {
                App,
            },
            // 在根实例中注册router对象
            router: router,
        })

    </script>

9、VuRouter之去掉中间的那些多余的参数

let router = new VueRouter({
            mode: 'history',            # 只需要在router对象中加一个mode：'history',就可以去掉多余的参数，效果如下
            routes: [
                {
                    name: 'home',
                    path: '/',
                    component: Home,
                },
                {
                    name: 'login',
                    path: '/login',
                    component: Login
                },
                {
                    name: 'pay',
                    path: '/pay',
                    meta: { required_login: true },
                    component: Pay,
                },
            ]
        });

 

转载于:https://www.cnblogs.com/wf123/p/9947942.html

weixin_30500105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router 例子程序搭建
liubangbo的专栏
12-16 104
想看一下vue-router 源代码，所以要先搭建一个环境。 1） 下载Vue.js 源代码 https://cn.vuejs.org/v2/guide/installation.html 中选择开发版本，就可以把vue.js下载下来了 2） 下载vue-router源代码 https://router.vuejs.org/zh/installation.htm...
Vue Router的详细教程
YunWisdom
11-11 1890
Vue Router的详细教程 安装 #直接下载 / CDN 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.j...
Vue-Router怎么使用？
weixin_61665636的博客
11-08 631
vue-router的详细内容
vue学习笔记之路由(Vue Router)安装
01-14 190
一、安装 直接下载 / CDN 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这样指定 版本号 或者 Tag。 在 ...
Vue中各组件的安装和卸载
Andy-ZhangSir的博客
06-01 1万+
前言 在我们刚使用vue时，会发现还是有些繁琐的，他会涉及很多的安装，比如vue、webpack、vue-cli、vue-router等。本章就针对这种情况，将涉及到的安装整理一下。 vue的安装 这里介绍几种方式。也可以看官网文档 使用<script>标签引用 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 开发版本：https://cn.vuejs.org/js/vue.js 生产版本：https://cn.vuejs.org/js/vue.min.
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue Router系列之路由重定向
老__L的博客
12-11 4768
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C，从而展示特定的组件页面；通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
Vue Router系列之详解路由守卫
老__L的博客
02-24 7471
详解路由守卫
Vue进阶——Vue Router（路由）
秋书一叶的博客
04-26 5154
Vue Router 是 Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。
vue-router动态路由实践
Bennett_G博客
01-09 2万+
vue动态路由 vuex 路由数据(demo) 贡献本人于服务端约定的路由数据结构，仅供参考
vue router 配置路由的方法
10-18
3. **配置路由规则**：通过 `VueRouter` 构造函数创建一个路由实例，传入一个 `routes` 数组，数组中每个对象代表一个路由规则，包含 `path` 和 `component` 属性。`path` 是 URL 哈希值，`component` 是对应显示的...
vue router路由嵌套不显示问题的解决方法
08-30
主要为大家详细介绍了vue router路由嵌套不显示的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题
22_VueRouter路由使用.pdf
10-07
目前Vue路由最新的版本是4.x版本。安装Vue Router可以使用npm install vue-router@4命令。使用Vue Router的步骤包括：创建路由组件的组件、配置路由映射、通过createRouter创建路由对象，并且传入routes和history...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
vueRouter路由详解：从入门到精通
01-08
Vue-Router 什么是路由？ 路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的...
JavaScript检查对象是否包含某个属性
徐三岁的博客
06-28 980
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
JS：防抖与节流函数的实现与应用
qq_45820271的博客
06-29 235
防抖：一连串操作只执行一次。通过设置一个延迟时间，如果这段时间没有再次执行操作则运行目标函数，否则重新计时。
Vue前端打包
最新发布
weixin_63680330的博客
07-04 134
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1225
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
vue router路由
10-12
关于Vue Router路由，它是Vue.js官方提供的路由管理器，可以实现单页应用中的页面跳转、参数传递、路由拦截等功能。 Vue Router的使用步骤如下： 1. 安装Vue Router：可以通过npm或yarn进行安装。 2. 在Vue项目中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值