您的位置:时时app平台注册网站 > web前端 > vue-router 基本使用【彩世界网址】

vue-router 基本使用【彩世界网址】

2019-11-08 03:46

  配置达成后,把router 实例注入到 vue 根实例中,就能够利用路由了

正文摘自:      如有侵犯权益请联系博主删除

{
        path: "/user/:id",
        name: "user",
        component: user
}
 <router-link to="/user/123">User123</router-link> // 和下面等价 

 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {

}
</script>

  在路由的计划上,首先步入到 home ,然后技术跻身到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子成分。所以vue  提供了childrens 属性,它也是风姿洒脱组路由,相当于我们所写的routes。

命名路由

    1, route,它是一条路由,由那几个阿尔巴尼亚语单词也得以看出来,它是单数, Home按键  => home内容, 那是一条route,  about开关 => about 内容, 这是另一条路由。

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about组件'
            }
        }
    }
</script>

  推行进程:当客商点击 router-link 标签时,会去搜索它的 to 属性, 它的 to 属性和 js 中布署的门径{ path: '/home', component: Home}  path 后生可畏豆蔻梢头对应,进而找到了合作的机件, 最终把组件渲染到 <router-view> 标签所在的地点。全体的这个达成才是依据hash 达成的。

<template>
    <div>
        <h1>User</h1>
        <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
            dynamicSegment () {
                return this.$route.params.id
            }
        }
    }
</script>

 vue-cli 成立多个品类体验一下, 当然绝不遗忘安装vue-router

  嵌套路由,首要是由大家的页面结构所调节的。当大家进去到home页面包车型大巴时候,它下边还也可以有分类,如手提式有线电话机一而再串,平板连串,Computer密密层层。当大家点击各类分类的时候,它还是需求路由到各样部分,如点击掌提式有线话机,它自然到相应到手提式有线电话机的一对。

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    // 重定向
    {
        path: '/', 
        redirect: '/home' 
    }
]

  5, 此时点击页面上的home 和about 能够看来组件来回切换。然则有一个标题,当第贰回跻身页面包车型大巴时候,页面中并从未出示别的内容。那是因为第壹回步入页面时,它的路径是 '/',大家并不曾给这一个渠道做相应的安排。平日,页面HTC载进来都展会示home页面,大家也要把这一个门路指向home组件。可是只要大家写{ path: '/', component: Home },vue 会报错,因为两条路径却指向同一个主旋律。那怎么做?那亟需重定向,所谓重定向,正是重新给它钦点四个趋向,它自然是拜谒/ 路线,大家再次指向‘/home’, 它就约等于访问 '/home', 相应地, home组件就博览会示到页面上。vueRouter中用 redirect 来定义重定向。

  命名路由的行使, 在router-link 中to 属性就可以接收对象了, 

  我们定义三个user组件(自个儿随意写二个就好了卡塔 尔(英语:State of Qatar),页面中再增添八个router-link 用于导航, 最终router.js中增多路由安插,来心得一下

  在动态路由中,怎么获取到动态部分? 因为在组件中是足以展现分化部分的,便是下边提到的“你的名字”。其实,当一切vue-router 注入到根实例后,在组件的里边,能够透过this.$route 来获取到 router 实例。它有贰个params 属性,就是来博取这些动态部分的。它是二个目的,属性名,正是路径中定义的动态部分 id, 属性值正是router-link中to 属性中的动态部分,如123。使用vuex时,组件中想要获取到state 中的状态,是用computed 属性,在这里处也是大同小异,在组件中,定义八个computed 属性dynamicSegment, user 组件修正如下:

  路由中有多个着力的概念 route, routes, router。

  路由,其实正是指向的意味,当小编点击页面上的home按键时,页面中就要展现home的内容,若是点击页面上的about 按键,页面中将在展现about 的开始和结果。Home按键  => home 内容, about按钮=> about 内容,也能够说是风流倜傥种映射. 所以在页面上有五个部分,一个是点击部分,贰个是点击之后,显示内容的风度翩翩部分。 

  2, 在 App.vue中 定义<router-link > 和 </router-view>  

<template>
    <div>
        <h1>User</h1>
        <div>我是user组件</div>
    </div>
</template>
<script>
    export default {

    }
</script>
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

  那时在页面中式点心击user123 和user456, 能够见到它们都领航到user组件,配置不错。   

  取名路由,异常的粗略,因为依照名字就能够通晓,那个路由有二个名字,那就径直给那一个路由加一个name 属性,就能够了。 给user 路由加五个name 属性:

  app.vue 中加多四个router-link:

this.$router.push("home"), 就足以跳转到home分界面

    在vue-router中, 大家看见它定义了三个标签<router-link> 和<router-view>来对应点击和出示部分。<router-link> 正是概念页面中式茶食击的片段,<router-view> 定义展现部分,正是点击后,区配的剧情体现在如何地点。所以 <router-link> 还恐怕有一个足够关键的质量 to,定义点击之后,要到何地去, 如:<router-link  to="/home">Home</router-link>

  vue-router中的路由也是依据上边的内容来兑现的

  2, js 中配备路由

彩世界网址 1

  点击之后,怎么达成正确的对应,例如,我点击home 按键,页面中怎么就刚刚能显得home的内容。那即就要js 文件中安插路由。

  1, 页面实现(html模版中卡塔尔

  4, 把路由注入到根实例中,运行路由。这里实在还也许有生机勃勃种格局,就好像vuex  store 注入到根实例中平等,大家也得以把vueRouter 直接注入到根实例中。在main.js中引进路由,注入到根实例中。

6, 最终,大家看一下路由是怎么落到实处的

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    /*新增user路径,配置了动态的id*/
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

    4,客商端中的路由,实际上便是dom 元素的体现和掩没。当页面中显得home 内容的时候,about 中的内容全方位藏身,反之也是大器晚成致。顾客端路由有三种落成方式:基于hash 和依附html5 history api.

    大家那边有两条路由,组成三个routes: 

router.js 配置路由,改进如下:

  1, 在src 目录下新建三个零件,home.vue 和 about.vue

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"    // import router 的router 一定要小写, 不要写成Router, 否则报 can't match的报错
new Vue({
  el: '#app',
  router,  // 注入到根实例中
  render: h => h(App)
})
children: [
    {
        path: "phone",
        component: phone
    },
    {
        path: "tablet",
        component: tablet
    },
    {
        path: "computer",
        component: computer
    },
    // 当进入到home时,下面的组件显示
    {
        path: "",
        component: phone
    }
]

    3, router 是二个机制,也就是一个CEO,它来管理路由。因为routes 只是概念了意气风发组路由,它坐落哪个地方是依葫芦画瓢的,当真正来了央求,如何是好? 正是当客户点击home 开关的时候,怎么做?这个时候router 就起成效了,它到routes 中去探索,去找到相应的 home 内容,所以页面中就展示了 home 内容。

const app = new Vue({
  router
}).$mount('#app')

  张开浏览器调整台,首先观看 router-link 标签渲染成了 a 标签,to 属性别变化成了a 标签的 href 属性,那个时候就通晓了点击跳转的野趣。router-view 标签渲染成了大家定义的零器件,其实它正是一个占位符,它在如啥地点方,相称路线的零器件就在哪些地点,所以 router-link 和router-view 标签生机勃勃风姿洒脱对应,成对现身。

  在vue中落到实处路由依然相对轻便的。因为我们页面中兼有剧情都以组件化的,大家纵然把门路和组件对应起来就足以了,然后在页面中把组件渲染出来。

const routes = [
    {
        path:"/home",
     // 下面这个属性也不少,因为,我们是先进入home页面,才能进入子路由
        component: home,
     // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            }
        ]
    },
    {
        path: "/about",
        component: about
    },
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]
<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象,你可以把它打印出来,它们也有一个param 属性
                console.log(to);
                console.log(from);
                this.dynamicSegment = to.params.id
            }
        }
    }
</script>

嵌套路由

  这时候当大家点击home 时,它上面现身手提式有线电话机等字样,但一直不其他对应的零部件实行显示,那经常不是大家想要的。要想点击home时,要想渲染相对应的子组件,那还要求配备一条路由。当踏向到home 时,它在children中对应的路由path 是空 ‘’,完整的childrens 如下:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
     <!--  增加两个到user组件的导航,可以看到这里使用了不同的to属性 -->
      <router-link to="/user/123">User123</router-link>
      <router-link to="/user/456">User456</router-link>
    </header>
    <router-view></router-view>   
  </div>
</template>

 

  首先,在home页面上定义八个router-link 标签用于导航,然后再定义二个router-view标签,用于渲染对应的构件。router-link 和router-view 标签要各个对应。home.vue 组件改革如下:

  3,  在 src目录下再新建三个router.js 定义router, 便是概念 路线到 组件的 映射。

const router = new VueRouter({
      routes // routes: routes 的简写
})

  下面大家定义的路由,都以从严相称的,独有router-link 中的to属性和 js 中一条路由route中 path 大同小异,技艺显得相应的零器件component. 但神跡现实却不是如此的,当大家去做客网址并登陆成功后,它会展现 接待你, 你的名字。差别的客商登陆, 只是显得“你的名字” 部分不相同,别的一些是相近的。那就意味着,它是一个组件,假诺是user组件。分歧的客户(正是顾客的id不一致卡塔尔国,它都会导航到同三个user  组件中。那样大家在布置路由的时候,就不能够写死, 正是路由中的path属性,不可能写死,这要怎么设置? 导航到 user 组件,路线中自然有user, id 分歧,那就给路径一个动态部分来协作差异的id.  在vue-router中,动态部分 以 : 初叶,那么路线就成为了 /user/:id, 那条路由就足以这么写:  { path:"/user/:id", component: user }.

<template>
    <div>
        <h1>home</h1>
<!-- router-link 的to属性要注意,路由是先进入到home,然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
        <p>
            <router-link to="/home/phone">手机</router-link>
            <router-link to="/home/tablet">平板</router-link>
            <router-link to="/home/computer">电脑</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

  今后页面平常了,第壹次进入突显home, 并且点击也得以见见内容的切换。

  编制程序式导航:那关键接受到开关点击上。当点击按键的时候,跳转另贰个零零部件, 那只可以用代码,调用rourter.push() 方法。 当们把router 注入到根实例中后,组件中通过 this.$router 能够拿到到router, 所以在组件中应用

  user组件

    2, routes 是生机勃勃组路由,把地方的每一条路由组成起来,变成多少个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

  末了创造router 对路由举行管制,它是由构造函数 new vueRouter() 创立,接受routes 参数。

  这里还会有最后叁个难点,就是动态路由在往来切换时,由于它们都以指向同风姿浪漫组件,vue不会销毁再次创下设这一个组件,而是复用这几个组件,便是当第三遍点击(如:user123卡塔 尔(阿拉伯语:قطر‎的时候,vue 把相应的零件渲染出来,但在user123, user456点击来回切换的时候,那一个组件就不会爆发变化了,组件的生命周期不管用了。那个时候若是想要在组件来回切换的时候做点专门的学业,那么只可以在组件内部(user.vue中卡塔 尔(英语:State of Qatar)利用watch 来监听$route 的扭转。把上边的代码用监听$route 实现

import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import home from "./home.vue";
import about from "./about.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]

var router =  new VueRouter({
    routes
})
export default router;

router.js 配置user动态路由:

  这里还察看,当点击Home和About 来回切换时,a 标签有一个体裁类 .router-link-active 也在往返切换, 原本那是当router-link 处于选中状态时,vueRouter 会自动抬高这么些类,因而大家也足以动用那么些类来改动选中时的景色,如选中时,让它产生中灰。但当设置 .router-link-active {color: red;},它并从未奏效,当时还要在类后边加一个a, a.router-link-active {color: red;}, 这样就从未有过难题了。未处于选中状态的router-link, 大家也想给它改变样式,咋做? 直接给它增添贰个 class 就足以了, <router-link class="red">Home</router-link>

动态路由

    首先要定义route,  一条路由的落实。它是二个目的,由多个部分构成: path和component.  path 指路线,component 指的是组件。如:{path:’/home’, component: home}

本文由时时app平台注册网站发布于web前端,转载请注明出处:vue-router 基本使用【彩世界网址】

关键词: