正文

vue之路由(代码片段)

dong-  dong-  2023-01-17  165

关键词：

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

Vue Router的安装使用 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="d1"></div>


<script>
    //第一步在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-link :to="name: ‘home‘">首页</router-link>
            <router-link :to="name: ‘login‘">登录</router-link>
            <router-link :to="name: ‘register‘">注册</router-link>
            <router-view></router-view>-->

            <!--params是无参数名的传参关键字
            query是有参数名的传参关键字
            <router-link :to="name: ‘home‘">首页</router-link>
            <router-link :to="name: ‘login‘,params:loginId: 1">登录</router-link>
            <router-link :to="name: ‘register‘,query:reg: 1">注册</router-link>
            <router-view></router-view>-->
        </div>
        `,
    ;

    //第二部实例化一个router对象
    //本质上是将路径和页面内容绑定一个对应的关系
    // 在真实的场景中，可有以下路径形式
    // user/1;
    // user/?userId=1;
    let router = new VueRouter(
        mode: "history",
        routes: [
            
                name: "home",
                path: "/",
                component: Home,
            ,
            
                //xxx/参数
                name: "login",
                path: "/login/:loginId",
                component: Login
            ,
            
                //xxx/?参数名=参数值
                name: "register",
                path: "/register",
                component: Register
            
        ]
    );

    new Vue(
        el: "#d1",
        template: `<App/>`,
        //第三部在根实例对象中注册router对象
        router: router,
        components: 
            App,
        
    )
</script>

</body>
</html>

Vue Router子路由 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="d1"></div>


<script>

    Vue.use(VueRouter);

    let Home = 
        template: `<div><h1>这是主页</h1></div>`
    ;
    let Course = 
        template: `
            <div>
                <h2>课程页面</h2>
                <router-link :to="name: ‘python‘" append>派森</router-link>
                <router-link :to="name: ‘linux‘">linux</router-link>
                <router-view></router-view>
            </div>`,
    ;
    let Python = 
        template: `<div><h3>人生苦短,我用派森</h3></div>`
    ;
    let Linux = 
        template: `<div><h3>不会linux岂不是咸鱼</h3></div>`
    ;
    let Class = 
        template: `
            <div>
                <h1>班级页面</h1>
                <router-link :to="name: ‘one‘">一班</router-link>
                <router-link :to="name: ‘two‘">二班</router-link>
                <router-view></router-view>
            </div>`
    ;
    let One = 
        template: `
            <div>
                <router-link :to="name: ‘red‘">一班啊</router-link>
            </div>`
    ;
    let Two = 
        template: `<div><h3>二班啊</h3></div>`
    ;

    let router = new VueRouter(
        routes: [
            
                name: "home",
                path: "/",
                component: Home
            ,
            
                name: "course",
                path: "/course",
                component: Course,
                children: [
                    
                        name: "python",
                        path: "python",
                        component: Python
                    ,
                    
                        //使用append自动添加前路径的话.子路径名前不能有" / "
                        name: "linux",
                        path: "linux",
                        component: Linux
                    ,
                    
                        name: "red",
                        path: "red",
                        //重定向页面
                        redirect: "/",
                    
                ]
            ,
            
                name: "class",
                path: "/class",
                component: Class,
                children: [
                    
                        name: "one",
                        path: "/class/one",
                        component: One
                    ,
                    
                        name: "two",
                        path: "/class/two",
                        component: Two
                    
                ]
            ,
        ]
    );

    let App = 
        template:`
            <div>
                <router-link :to="name: ‘home‘">首页</router-link>
                <router-link :to="name: ‘course‘">课程</router-link>
                <router-link :to="name: ‘class‘">班级</router-link>

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


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

</script>
</body>
</html>

vue之路由(代码片段)

Vue之路由**后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；**前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特... 查看详情

vue之二级路由(代码片段)

　　一样式　　1在一个vue组件,<template></template>中，在加入<router-view></router-view>　　　　<template>　　　　　　<div>　　　　　　　　.......　　　　　　　　<router-view></router-view>　查看详情

vue项目优化之路由懒加载(代码片段)

path:‘/login‘,name:‘登录页面‘,hidden:true,　　meta:title:‘Readme‘,icon:‘el-icon-menu‘,component:resolve=>require([‘../views/login/Login.vue‘],resolve) 查看详情

vue之vue-roter(代码片段)

路由1.子路由：想要子路由的内容完全显示出来，那么就创建一个空路由，存放router-view，用来显示子理由的。path:‘/news‘,//新闻页面component:NewsN2,//用一个空的路由模板代替。提供<router-viwe>的渲染视图。name:‘NewsN2‘,children... 查看详情

vue开发之基础路由(代码片段)

1.router-link和router-view组件src/App.vie文件内容：<template><divid="app"><divid="nav"><router-linkto="/">Home</router-link>|<router-linkto=" 查看详情

vue之路由常用的几种传参方式(代码片段)

Vue之路由常用的几种传参方式第一种方式第二种方式第三种方式第一种方式必须在路由的path上配置相关参数路由配置（必须）：path:'/details/:id',name:'Details',component:Details传参toDetails(id) this.$router.push(path:`... 查看详情

vue路由元之进入路由需要用户登录权限功能(代码片段)

为什么需要路由元呢？？？　　博猪最近开发刚刚好遇到一个情况，就是有个路由页面里面包含了客户的信息，客户想进这个路由页面的话，就可以通过请求数据获取该信息，但是如果客户没有登录的话，是不能进到该页面的，... 查看详情

vue之vue-router(代码片段)

...编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)//1.定义（路由）组件。//可以从其他文件import进来constFoo=template:‘<div>foo</div>‘constBar=template:‘<div>bar</div>‘//2.定义路由//每个路由应该映查看详情

vue之vue-router的使用(代码片段)

一、简介　　1、vue-router是vue.js官方的路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。　　2、官方文档：https://router.vuejs.org/zh/。　　3、下载安装：npmivue-router-S(npminstallvue-router--save)。二、配置路由：... 查看详情

vue之路由以及默认路由跳转(代码片段)

vue之路由以及默认路由跳转之前我们将子组件挂载到根组件的时候都是手动挂载的，而路由就是自动的将子组件挂载到根组件中在这里我们需要用到一个路由插件，就是vue-router，vue-router网址：https://router.vuejs.org/zh/guide/既然要用... 查看详情

vue第七天学习笔记之vue-router详解(代码片段)

目录 1.动态路由2.路由懒加载2.1认识路由的懒加载2.2路由懒加载的效果2.3懒加载的方式3.路由嵌套3.1认识嵌套路由3.2嵌套路由实现3.3嵌套默认路径4.传递参数4.1准备工作4.2传递参数的方式4.3传递参数方式一:4.4传递参数方式二:JavaSc... 查看详情

每天一点点之vue框架开发-vue-router路由进阶（路由别名跳转设置默认路由）(代码片段)

路由别名别名的作用：防止文件路径泄露使用之前显示如下：使用别名后就只会显示到域名，后面的文件是不会显示的，这就起到保护的作用了在main.js中的路由中添加name来创建别名constroutes=[path:‘/footer‘,name:footer... 查看详情

vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）(代码片段)

模式vue-router中的模式选项主要在router实例化的时候进行定义的，如下constrouter=newVueRouter(　　　mode:‘history‘,//两种类型history还有hashroutes:routes//可以缩写成routes) 有两种模式可供选择，history和hash，大致对比一下，模式... 查看详情

vue开发实例（15）之动态路由(代码片段)

引言Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！即使你并非前端开发人员，对前端的开发流程进行... 查看详情

vue之vue-router(代码片段)

目录简介安装vue-router使用vue-routerrouter的方法路由跳转方法一使用js控制方法二使用标签控制路由跳转携带参数方法一使用问号携带方法二使用斜杠分隔符携带方法三使用对象的方式跳转方法四标签方式跳转携带参数router与route的... 查看详情

vue-router路由vue-cli脚手架和模块化开发之路由的动态跳转(代码片段)

...转是在页面中进行实现的利用vue-router实例方法，使用js对路由进行动态跳转；1、router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录；<div><button@click="push">push返回首页</button... 查看详情

vue学习笔记：26.脚手架vue-cli之路由vue-router(代码片段)

一.网页路由基础讲解1.什么是路由2.后端路由在早期的网页开发中，都是使用后端渲染。常用的计算包括：jsp，php等。后端渲染原理：当使用浏览器访问某个url时，会将该url发送到对应网站的服务器。服务器会... 查看详情

vue路由跳转之当前页面路由跳转并动态改变页面的title(代码片段)

... 然后在保证不跳转到其他页面，在本页面中进行路由跳转，实现title的变更改之后：在当前页面就实现了title的动态改变。下边是实现的方法：在点击下一步的时候：动态添加url并且携带自己改的参数，并... 查看详情