Vue.js之路由系统

番茄西红柿发布于2019-04-23 13:10 / 1418人阅读

摘要：生态之是什么是的路由系统，定位资源的，我们可以不进行整页刷新去切换页面内容。

Vue.js生态之vue-router

vue-router是什么?

vue-router是Vue的路由系统，定位资源的，我们可以不进行整页刷新去切换页面内容。

vue-router的安装与基本配置

vue-router.js 可以下载也可以用cdn，基本配置信息看如下代码

</>复制代码 
// html 代码
<div id="app">
    <div>
        <router-link to="/">首页router-link>
        <router-link to="/about">关于我们router-link>
    div>
    <div>
        <router-view>router-view>
    div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<script src="../js/router_demo.js">script>
// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `<div><h1>首页h1>div>`
        }
    },
    {
        path: "/about",
        component: {
            template: `<div><h1>关于我们h1>div>`
        }
    }
]
var router = new VueRouter({
    routes: routes,
    // 路由去掉#
    // mode: history,
});
var app = new Vue({
    el: #app,
    router: router,
});

路由的一些方法

路由传参以及获取参数~~

</>复制代码 
// html 代码
<div id="app">
    <div>
        <router-link to="/">首页router-link>
        <router-link to="/about">关于我们router-link>
        <router-link to="/user/琴女?age=20">琴女router-link>
        <router-link to="/user/提莫">提莫router-link>
    div>
    <div>
        <router-view>router-view>
    div>
div>
// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `<div><h1>首页h1>div>`
        }
    },
    {
        path: "/about",
        component: {
            template: `<div><h1>关于我们h1>div>`
        }
    },
    {
        path: "/user/:name",
        component: {
            template: `<div>
                      <h1>我是:{{$route.params.name}}h1>
                      <h1>我年龄是:{{$route.query.age}}h1>
                    div>`,
        }
    }
]
var router = new VueRouter({
    routes: routes,
});
var app = new Vue({
    el: #app,
    router: router,
});

命名路由~ 注意router-link里to一定要v-bind~~

</>复制代码 
<div id="app">
    <div>
        <router-link to="/">首页router-link>
        <router-link :to="{name: about}">关于我们router-link>
        <router-link to="/user/gaoxin?age=19">gaoxinrouter-link>
    div>
    <div>
        <router-view>router-view>
    div>
div>
// js代码
let routes = [
        {
            path: /,
            component: {
                template: `<h1>这是主页h1>`
            }
        },
        {
            path: "/about",
            name: "about",
            component: {
                template: `<h1>关于我们h1>`
            }
        },
        {
            path: "/user/:name",
            component: {
                template: `<div>
                            <h1>我是{{$route.params.name}}h1>
                           <h2>我的年龄是{{$route.query.age}}h2>
                            div>
                          `
            }
        }
    ];
    let router = new VueRouter({
        routes: routes,
        mode: "history"
    });
    const app = new Vue({
        el: "#app",
        router: router,
        mounted(){
            console.log(this.$route)
            console.log(this.$router)
        }
    })

子路由

</>复制代码 
// 添加子路由变化的只有父级路由 
// 基于上面的例子增加
// js 代码
{
        path: "/user/:name",
        component: {
            template: `<div>
                      <h1>我是:{{$route.params.name}}h1>
                      <h1>我年龄是:{{$route.query.age}}h1>
                      <router-link to="more" append>更多信息router-link>
                      <router-view>router-view>
                    div>`,
        },
        children: [
            {
            path: "more",
            component: {
                template: `<div>
                      {{$route.params.name}}的详细信息
                div>`,
            }
        }
        ]
    },

手动访问路由，以及传参~~

</>复制代码 
// 基于上面例子追加
// html 代码
<div id="app">
    <div>
        <router-link to="/">首页router-link>
        <router-link to="/about">关于我们router-link>
        <router-link to="/user/琴女?age=20">琴女router-link>
        <router-link to="/user/提莫">提莫router-link>
        // 添加一个button按钮
        <button @click="on_click">旅游button>
    div>
    <div>
        <router-view>router-view>
    div>
div>    
// js 代码
// 注意路由name的使用 这是在原例子追加
var app = new Vue({
    el: #app,
    router: router,
    methods: {
        on_click: function () {
            setTimeout(function () {
                this.$router.push(/about)
                setTimeout(function () {
                    this.$router.push({name: "user", params:{name: "琴女"},query:{age: 20}})
                }, 2000)
            }, 2000)
        }
    }
});

命名路由视图 router-view

当我们只有一个的时候~所有内容都展示在这一个面板里面~

如果是content 和 footer 就需要同时显示并且不同区域~这就需要对视图进行命名~

命名视图路由

</>复制代码 
// html 代码
<div id="app">
    <div>
        <router-link to="/">首页router-link>
        
    div>
    <div>
        <router-view name="content" class="content-view">router-view>
        <router-view name="footer" class="footer-view">router-view>
    div>
div>
// js 中的主要代码
var routes = [
    {
        path: "/",
        components: {
            content: {
                template: `<div><h1>首页h1>div>`,
            },
            footer: {
                template: `<div><h1>关于我们h1>div>`,
            }
        }
    },
]

错误路由的重定向

</>复制代码 
let routes = [
     {
            path: "**",
            redirect: "/"
        }   
]

$route以及$router的区别~~

　　-- $route为当前router调转对象，里面可以获取name, path, query, params等~

　　-- $router为VueRouter实例，有$router.push方法等~~

路由的钩子

路由的生命周期就是从一个路由跳转到另一路由整个过程，下面介绍两个钩子~

router.beforeEach() router.afterEach() 详情请看代码

路由钩子

</>复制代码 
// html 代码
<div id="app">
    <router-link to="/">首页router-link>
    <router-link to="/login">登录router-link>
    <router-link to="/user">用户管理router-link>
    <div>
        <router-view>router-view>
    div>
div>
//  js 代码
var routes = [
    {
        path: "/",
        component: {
            template: "<h1>首页h1>"
        }
    },
    {
        path: "/login",
        component: {
            template: "<h1>登录h1>"
        }
    },
    {
        path: "/user",
        component: {
            template: "<h1>用户管理h1>"
        }
    }
];
var router = new VueRouter({
    routes: routes
});
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.path=="/user"){
        next("/login")
    }
    else {
        next();
    }
});
router.afterEach(function (to, from) {
    console.log(to)
    console.log(from)
});
var app = new Vue({
    el: #app,
    router: router
});

next参数配置

</>复制代码 
next：function  一定要调用这个方法来resolve这个钩子函数。
        执行效果依赖next方法的调用参数
        next() 什么都不做继续执行到调转的路由
        next(false) 中断当前导航 没有跳转 也没有反应
        next("/")  参数是路径 调转到该路径
        next(error)  如果next参数是一个Error实例 导航终止该错误
                    会传递给router.onError()注册过的回调中

如果/user下面还有子路由的情况下会怎么样呢~？？？？

</>复制代码 
// 匹配子路由 改一下匹配方法就可以~
// js 改动代码
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.matched.some(function (item) {
            return item.path == "/post"
        })){
        next("/login")
    }
    else {
        next();
    }
});
// 元数据配置 改动代码
// html 部分
 {
        path: "/user",
        meta: {
            required_login: true,
        },
        component: {
            template: `
                <div>
                <h1>用户管理h1>
                <router-link to="vip" append>viprouter-link>
                <router-view>router-view>
                div>
                `
        },
        children: [{
            path: "vip",
            meta: {
              required_login: true,
            },
            component: {
                template: <h1>VIPh1>
            }
        }]
    }
// js 部分
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.meta.required_login){
        next("/login")
    }
    else {
        next();
    }
});

GPU云服务器云服务器 Vue.js 然之开源系统 vue.js 属性 vue.js自学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1530.html

利用K8S技术栈打造个人私有云（连载之：私有云客户端打造）

摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...

Jingbin_ 2019-06-28 16:19 评论0 收藏0
利用K8S技术栈打造个人私有云（连载之：私有云客户端打造）

摘要：前端技术栈还是非常庞大的，为了能够借助已经存在的轮子来造出一辆车，所以我选择了进行实践。状态的管理的状态管理依靠完成，用其来管理的所有组件状态。私有云客户端打造主页面首先是主页面，可以打开任何一个云主机系统的页面看，基本类似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技术栈打造个人私有...

shiina 2019-07-01 16:41 评论0 收藏0
Vue 2.x 实战之后台管理系统开发（二）

摘要：导语承接上文实战之后台管理系统开发一在上一篇文章中，我详细叙述了如何创建项目框架和引入各种后台常用插件，做好这些准备工作后，我们就可以着手进行页面的开发了。如果传入的数据不符合规格，会发出警告。 1. 导语承接上文：Vue 2.x 实战之后台管理系统开发（一）在上一篇文章中，我详细叙述了如何创建项目框架和引入各种后台常用插件，做好这些准备工作后，我们就可以着手进行页面的开发了。在开...

Ilikewhite 2019-08-20 17:01 评论0 收藏0
Vue学习笔记之vue-cli项目搭建及解析

摘要：样式通过标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加，如要引入外部文件，首先需给项目安装依赖包，打开，进入项目目录，输入回车。 showImg(https://segmentfault.com/img/remote/1460000013235090); （一）安装node.js 首先需要安装node环境，可以直接到中文官网http://nodejs.cn/...

Caizhenhao 2019-08-26 11:41 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师

我要关注我要私信

TA的文章

tensor

阅读 867·2023-04-25 19:43
Windows 下安装 XGBoost

阅读 4138·2021-11-30 14:52
Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

阅读 3943·2021-11-30 14:52
VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

阅读 4046·2021-11-29 11:00
百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

阅读 3942·2021-11-29 11:00
Linux系统和宝塔面板如何启用禁ping功能?

阅读 4065·2021-11-29 11:00
301重定向怎么做?301重定向设置方法有几种

阅读 3794·2021-11-29 11:00
wordpress网站重定向次数过多的解决方法

阅读 6648·2021-11-29 11:00

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

Vue.js之路由系统

Vue.js生态之vue-router

vue-router是什么?

vue-router的安装与基本配置

</>复制代码

路由的一些方法

路由传参以及获取参数~~

</>复制代码

命名路由~ 注意router-link里to一定要v-bind~~

</>复制代码

子路由

</>复制代码

手动访问路由，以及传参~~

</>复制代码

命名视图路由

</>复制代码

错误路由的重定向

</>复制代码

$route以及$router的区别~~

路由的钩子

路由钩子

</>复制代码

next参数配置

</>复制代码

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动