router基本使用,路由达成登入注册跳转

by admin on 2019年5月4日

  路由,其实便是指向的意味,当自家点击页面上的home按键时,页面中就要展现home的内容,假设点击页面上的about
开关,页面中就要突显about 的剧情。Home开关  => home 内容, about开关=> about 内容,也可以说是一种映射.
所以在页面上有三个部分,3个是点击部分,二个是点击之后,突显内容的局部。 

路由,其实正是指向的情致,当自个儿点击页面上的home 
按键时,页面中就要显示home的始末,假若点击页面上的about
按键,页面中就要突显about 的内容。Home开关  => home 内容, about按钮=> about 内容,也足以说是1种光彩夺目。
所以在页面显示中,有七个部分,叁个是内需点击的有个别,3个是点击之后,呈现点击内容的有个别。

壹路由,其实正是指向的乐趣,当自个儿点击页面上的home按键时,页面中就要展现home的剧情,假设点击页面上的about
按键,页面中就要展现about 的始末。Home按键  => home 内容, about按键=> about 内容,也得以说是壹种映射.
所以在页面上有四个部分,2个是点击部分,贰个是点击之后,呈现内容的一些。

一、精通概念

1、路由:路由正是指向的意趣,白话来讲就是点击什么开关,然后就跳转到对应的页面内容。如:点击开关home,跳转到home页面。

2、理解route,routes,router

      route,是路由的意味,如home按键 点击到页面 
home,这么些正是一条route,定义route分为两局地,其一是path路线,其二是component组件
=====>{path:’/home ‘,component:home}。

      而routes是复数,可以把routes看做route的集合/数组。

     
router就视作一个官员,去管理路由的。当用户点击home开关的时候,请求到home页面内容,router知道了,就去管理了,然后就去了routes里去找到格外具体的route,找到了对应的home页面内容,被渲染出来。

3、路径和零部件是对应起来的,再在页面中渲染出来。

4、把所要点击的按键用<router-link to=’
‘></router-link>包裹起来。

五、router-link渲染成了<a>标签,to=”引号里的渲染成了<a>标签的href

  点击之后,怎么办到正确的关照,比方,笔者点击home
开关,页面中怎么就正好能显得home的剧情。那即将在js 文件中配备路由。

点击之后,怎么达成科学的应和,比方,作者点击home
按键,页面中怎么工夫彰显home的剧情。那就要在js 文件中安顿路由。

点击之后,怎么达成科学的应和,比如,作者点击home
开关,页面中怎么就恰恰能突显home的始末。这将要在js 文件中布局路由。

二、实例

得以达成效益,点击“人”,调转到登6页面,如下图

那边的报到页面包车型地铁内容本人就轻巧写了多少个字。

必发88 1

必发88 2

登入页面

  路由中有八个为主的概念 route, routes, router。

路由中有多少个焦点的定义 route, routes, router。

路由中有四个为主的概念 route, routes, router。

步骤:

壹、新建组件login.vue;

2、在App.vue中定义<router-view></router-view>;

三、在home.vue中定义点击后跳转到哪个路线(因为作者的点击按键存在于home.vue中);如下图

利用<router-link to=” “></router-link>      
引号内填入要跳转的门道

必发88 3

肆、在mian.js里定义router,正是概念路线到零部件的投射

     壹)引进组件

     2)告诉vue使用vueRouter

router基本使用,路由达成登入注册跳转。     三)   配置路由

     四)注入到根实例中

如下图:

必发88 4

    壹, route,它是一条路由,由那个英文单词也足以看出来,它是单数,
Home开关  => home内容, 那是一条route,  about按键 => about 内容,
那是另一条路由。

一, route,它是一条路由,由那一个英文单词也得以看出来,它是单数,
Home按键  => home内容, 那是一条route,  about按键 => about 内容,
那是另一条路由。

一, route,它是一条路由,由那么些英文单词也能够看出来,它是单数,
Home开关  => home内容, 那是一条route,  about按键 => about 内容,
这是另一条路由。

三、注意点

壹、路由的不二秘诀一定要陈设不错;新手轻巧搞不懂路线的没有错写法,能够去查究一下:这里大约说一下

“./” ====>当前目录下

“../” ====>当前目录下的上顶级目录

而安插路由的时候,前边无需“.”

必发88 5

毋庸置疑路线

         
1始发本身因为路由的不二等秘书籍写错了,导致页面渲染不出去,如下图,是大错特错的门路,只是加了‘./’

必发88 6

似是而非路径

    2, routes
是一组路由,把上边的每一条路由组成起来,变成五个数组。[{home 按钮
=>home内容 }, { about按钮 => about 内容}]

二, routes 是1组路由,把上边包车型地铁每一条路由整合起来,变成二个数组。[{home
按钮 =>home内容 }, { about按钮 => about 内容}]

二, routes 是1组路由,把上边的每一条路由整合起来,形成1个数组。[{home
按钮 =>home内容 }, { about按钮 => about 内容}]

    三, router
是二个建制,相当于1个总管,它来管理路由。因为routes
只是概念了一组路由,它坐落何地是严守原地的,当真正来了请求,怎么办?
就是当用户点击home 开关的时候,咋做?那时router 就起效率了,它到routes
中去研究,去找到相应的 home 内容,所以页面中就体现了 home 内容。

三, router 是3个机制,也正是三个长官,它来管理路由。因为routes
只是概念了一组路由,它放在什么地方是稳步的,当真正来了请求,怎么做?
正是当用户点击home 开关的时候,如何做?那时router 就起功能了,它到routes
中去探求,去找到相应的 home 内容,所以页面中就显得了   home 内容。

三, router 是四个体制,也正是2个官员,它来管理路由。因为routes
只是概念了一组路由,它座落何地是铁钉铁铆的,当真正来了请求,如何做?
正是当用户点击home 按键的时候,怎么做?那时router 就起效果了,它到routes
中去搜求,去找到呼应的 home 内容,所以页面中就显示了 home 内容。

    肆,客户端中的路由,实际上就是dom
成分的显得和潜伏。当页面中显得home 内容的时候,about
中的内容总体东躲福建,反之也是均等。客户端路由有三种落成方式:基于hash
和依据html五 history api.

4,客户端中的路由,实际上正是dom 成分的来得和藏身。当页面中显得home
内容的时候,about
中的内容总体潜伏,反之也是1模同样。客户端路由有三种实现形式:基于hash
和依据html5 history api.

四,客户端中的路由,实际上便是dom 成分的突显和隐藏。当页面中显得home
内容的时候,about
中的内容全方位藏身,反之也是同等。客户端路由有两种达成方式:基于hash
和依靠html5 history api.

  vue-router中的路由也是依靠上边包车型大巴剧情来落到实处的

vue-router中的路由也是依附下边包车型大巴剧情来兑现的

vue-router中的路由也是依赖下边包车型地铁剧情来促成的

  在vue中得以落成路由依旧相对简便易行的。因为大家页面中持有内容都以组件化的,大家假如把门路和零部件对应起来就足以了,然后在页面中把组件渲染出来。

在vue中贯彻路由依然相对轻松的。因为大家页面中保有剧情都以组件化的,我们即使把渠道和组件对应起来就足以了,然后在页面中把组件渲染出来。

在vue中得以完结路由依旧绝对轻易的。因为大家页面中有着剧情都以组件化的,我们只要把门路和组件对应起来就可以了,然后在页面中把组件渲染出来。

  一, 页面达成(html模版中)

一, 页面完毕(html模版中)

壹, 页面达成(html模版中)

    在vue-router中, 我们看来它定义了多少个标签<router-link>
和<router-view>来对应点击和彰显部分。<router-link>
正是概念页面中式点心击的局地,<router-view>
定义展现部分,便是点击后,区配的始末显示在怎么地点。所以 <router-link>
还有二个老大重大的性质 to,定义点击之后,要到何地去,
如:<router-link  to=”/home”>Home</router-link>

在vue-router中, 大家也得以看来它定义了五个标签<router-link>
和<router-view>。 <router-link>
正是概念页面中式点心击的有个别,<router-view>
便是点击后,显示内容的有的。所以 <router-link>
还有2个百般关键的属性 to, 它定义 点击之后,要到哪个路线下 ,
如:<router-link  to=”/home”>Home</router-link>

在vue-router中, 我们来看它定义了七个标签 和来对应点击和出示部分。
就是概念页面中式点心击的一部分,
定义呈现部分,就是点击后,区配的剧情展现在哪些地方。所以 
还有一个十二分关键的性质 to,定义点击之后,要到什么地方去, 如:Home

  二, js 中铺排路由

贰, js 中布署路由

二, js 中配备路由

    首先要定义route,  一条路由的得以落成。它是3个对象,由七个部分构成:
path和component.  path 指路线,component 指的是组件。如:{path:’/home’,
component: home}

第贰要定义route, 
一条路由的得以落成。它是3个目标,最基本的一条路由由多少个部分构成: path:
component.  path 指路线,component 指的是组件。如:{path:’/home’,
component: home}

先是要定义route,  一条路由的落到实处。它是八个对象,由五个部分构成:
path和component.  path 指路线,component 指的是组件。如:{path:’/home’,
component: home}

    我们那边有两条路由,组成四个routes: 

大家这里有两条路由,组成贰个routes:

咱俩这边有两条路由,组成多个routes:

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

const routes =[

  最终创设router 对路由进行田间处理,它是由构造函数 new vueRouter()
缔造,接受routes 参数。

终极创立router 对路由举办田间管理,它是由构造函数 new vueRouter()
创制,接受routes 参数。

{ path:’/home’, component: Home },

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

{ path:’/about’, component: About }

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

安顿完毕后,把router 实例注入到 vue 根实例中,就足以选取路由

]

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

最终创设router 对路由进行田间管理,它是由构造函数 new vueRouter()
创造,接受routes 参数。

  试行进度:当用户点击 router-link 标签时,会去索求它的 to 属性, 它的
to 属性和 js 中配备的门路{ path: ‘/home’, component: Home}  path
11对应,从而找到了协作的机件, 最终把组件渲染到 <router-view>
标签所在的地方。全体的这几个达成才是依靠hash 落成的。

施行进程:当用户点击 router-link 标签时,会去搜索它的 to 属性, 它的 to
属性和 js 中布署的门路{ path: ‘/home’, component: Home}  path
1一对应,从而找到了万分的零部件, 最后把组件渲染到 <router-view>
标签。全数的这个实现才是依据hash 完成的。

const router =newVueRouter({

 vue-cli 成立3个项目体验一下, 当然绝不忘记安装vue-router

vue-cli 成立3个连串体验一下, 当然绝不忘记安装vue-router

routes//routes: routes 的简写})

  一, 在src 目录下新建四个零部件,home.vue 和 about.vue

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

安排完结后,把router 实例注入到 vue 根实例中,就足以运用路由了

<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>
<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基本使用,路由达成登入注册跳转。const app =newVue({

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

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

router

<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>
<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>

}).$mount(‘#app’)

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

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

举行进度:当用户点击 router-link 标签时,会去搜索它的 to 属性, 它的 to
属性和 js 中布局的门径{ path: ‘/home’, component: Home}  path
1一对应,从而找到了合作的机件, 最后把组件渲染到
标签所在的地点。全部的那一个完毕才是依靠hash 实现的。

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;
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;

vue-cli 创制1个连串体验一下, 当然绝不忘记安装vue-router

  4, 把路由注入到根实例中,运转路由。这里实在还有1种方法,就好像vuex
 store 注入到根实例中1律,大家也能够把vueRouter
直接注入到根实例中。在main.js中引进路由,注入到根实例中。

四, 把路由注入到根实例中,运转路由。这里实在还有一种方法,就如store
注入到根实例中,大家得以在main.js中引进路由,注入到根实例中。

壹, 在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)
})
import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"
new Vue({
 el: '#app',
 router, // 注入到根实例中
 render: h => h(App)
})

必发88 7

  伍, 这时点击页面上的home 和about
能够看来组件来回切换。可是有八个标题,当第1回进入页面包车型大巴时候,页面中并从未显得其余内容。那是因为第一回跻身页面时,它的门径是
‘/’,大家并不曾给这一个路子做相应的安顿。一般,页面红米载进来都会呈现home页面,大家也要把这一个门路指向home组件。不过一旦大家写{
path: ‘/’, component: Home },vue
会报错,因为两条门路却指向同一个大方向。那怎么做?那需求重定向,所谓重定向,正是重复给它钦定四个趋势,它自然是访问
/ 路线,大家再一次指向‘/home’, 它就一定于访问 ‘/home’, 相应地,
home组件就能够展现到页面上。vueRouter中用 redirect 来定义重定向。

⑤, 那时点击页面上的home 和about
能够看看组件来回切换。可是有1个主题材料,当第三次跻身页面包车型客车时候,页面中并不曾出示任何组件。大家想让页面红米载进来就呈现home页面,这亟需重定向,所谓重定向,其实正是双重给它钦赐二个势头,比方当用户点击home
的时候,大家让它指向about.

   

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

那用到了redirect 配置。刚进来页面的时候,它的路线是 ‘/’,
所以重新定义到home

       

  以后页面平常了,第壹回跻身显示home, 并且点击也得以见到内容的切换。

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

home

       

{{msg}}

   

exportdefault{

data () {return{

msg:”我是home 组件”}

}

}

必发88 8

必发88 9

   

       

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

陆, 当我们开发浏览器的调节台,能够阅览路由时组件的切换。

about

       

{{aboutMsg}}

   

exportdefault{

data () {return{

aboutMsg:’我是about组件’}

}

}

必发88 10

2, 在 App.vue中 定义 和 

必发88 11

 

    必发88 12              Home     
About               

exportdefault{

}

必发88 13

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

必发88 14

import Vue from “vue”;

import VueRouter from”vue-router”;//引进组件import home from
“./home.vue”;

import about from”./about.vue”;//要告诉 vue 使用
vueRouterVue.use(VueRouter);

const routes=[

{

path:”/home”,

component: home

},

{

path:”/about”,

component: about

}

]varrouter =newVueRouter({

routes

})

exportdefaultrouter;

必发88 15

肆, 把路由注入到根实例中,运转路由。这里实在还有一种办法,就好像vuex
 store 注入到根实例中一样,我们也能够把vueRouter
直接注入到根实例中。在main.js中引进路由,注入到根实例中。

必发88 16

import Vue from ‘vue’import App from’./App.vue’//引进路由import router
from “./router.js”newVue({

el:’#app’,

router,//注入到根实例中render: h =>h(App)

})

必发88 17

伍, 那时点击页面上的home 和about
能够看来组件来回切换。可是有1个标题,当第3遍跻身页面包车型地铁时候,页面中并从未突显任何内容。这是因为第3次跻身页面时,它的不2法门是
‘/’,我们并不曾给那个路子做相应的配备。一般,页面Samsung载进来都会显得home页面,我们也要把这些门路指向home组件。可是假如大家写{
path: ‘/’, component: Home },vue
会报错,因为两条渠道却指向同三个主旋律。那如何做?那亟需重定向,所谓重定向,就是重新给它钦命一个趋势,它自然是造访
/ 路线,大家重新指向‘/home’, 它就约等于访问 ‘/home’, 相应地,
home组件就能够显得到页面上。vueRouter中用 redirect 来定义重定向。

必发88 18

const routes =[

{

path:”/home”,

component: home

},

{

path:”/about”,

component: about

},//重定向{

path:’/’,

redirect:’/home’}

]

必发88 19

现行反革命页面平常了,第一遍跻身展现home, 并且点击也足以看到内容的切换。

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

开采浏览器调整台,首先看到 router-link 标签渲染成了 a 标签,to
属性别变化成了a 标签的 href 属性,那时就精晓了点击跳转的情趣。router-view
标签渲染成了大家定义的机件,其实它正是1个占位符,它在怎么样地点,相配路线的零件就在怎样地点,所以
router-link 和router-view 标签壹壹对应,成对出现。

必发88 20

此地还看到,当点击Home和About 来回切换时,a
标签有贰个体制类 .router-link-active 也在往返切换,
原来那是当router-link 处于选中状态时,vueRouter
会自动抬高那个类,因而大家也足以选拔那个类来改换选中时的动静,如选中时,让它成为海螺红。但当设置
.router-link-active {color:
red;},它并不曾收效,那时还要在类前边加三个a, a.router-link-active
{color: red;}, 这样就从未难题了。未处于选中状态的router-link,
我们也想给它改动样式,如何是好? 直接给它增多三个 class 就能够了, Home

动态路由

上边大家定义的路由,都以严苛相配的,只有router-link 中的to属性和 js
中一条路由route中 path 一模同样,才干显得相应的零部件component.
但有时候现实却不是那样的,当大家去访问网址并登五分之三功后,它会显得 应接你,+
你的名字。区别的用户登6, 只是显示“你的名字”
部分不一样,其余一些是壹律的。那就象征,它是三个零部件,即便是user组件。区别的用户(就是用户的id分化),它都会导航到同三个user
 组件中。那样大家在安排路由的时候,就无法写死,
便是路由中的path属性,无法写死,那要怎么设置? 导航到 user
组件,路线中一定有user, id 差别,那就给路线一个动态部分来同盟不一样的id.
 在vue-router中,动态部分 以 : 开端,那么路线就造成了 /user/:id,
这条路由就能够如此写:  { path:”/user/:id”, component: user }.

作者们定义叁个user组件(本身随意写二个就好了),页面中再增加五个router-link
用于导航, 最终router.js中增多路由布署,来体会一下

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

必发88 21

必发88 22

Home

About

User123

User456

必发88 23

router.js 配置user动态路由:

必发88 24

const routes =[

{

path:”/home”,

component: home

},

{

path:”/about”,

component: about

},/*新扩张user路线,配置了动态的id*/{

path:”/user/:id”,

component: user

},

{

path:’/’,

redirect:’/home’}

]

必发88 25

user组件

必发88 26

   

       

  展开浏览器调控台,首先观望 router-link 标签渲染成了 a 标签,to
属性别变化成了a 标签的 href 属性,那时就知道了点击跳转的意味。router-view
标签渲染成了我们定义的机件,其实它便是一个占位符,它在哪些地点,相配路径的组件就在什么样地点,所以
router-link 和router-view 标签一一对应,成对出现。

首先观察 router-link 标签渲染成了 a 标签,to 属性别变化成了a 标签的 href
属性,那时就领悟了点击跳转的乐趣。router-view
标签渲染成了大家定义的零部件。能够相比较一下app.vue 中的标签和调整新竹的标签

User

       

我是user组件

   

exportdefault{

}

必发88 27

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

在动态路由中,怎么获取到动态部分?
因为在组件中是能够来得不一样部分的,便是地点提到的“你的名字”。其实,当全体vue-router
注入到根实例后,在组件的中间,能够经过this.$route 来博取到 router
实例。它有二个params
属性,正是来收获那一个动态部分的。它是一个目的,属性名,正是门路中定义的动态部分
id, 属性值就是router-link中to
属性中的动态部分,如1②三。使用vuex时,组件中想要获取到state
中的状态,是用computed 属性,在那边也是同样,在组件中,定义2个computed
属性dynamicSegment,user 组件修改如下:

必发88 28

   

       

必发88 29

必发88 30

User

必发88,       

自己是user组件, 动态部分是{{dynamicSegment}}

   

exportdefault{

computed: {

dynamicSegment () {returnthis.$route.params.id

}

}

}

必发88 31

这里还有最终叁个难题,正是动态路由在来往切换时,由于它们都以指向平等组件,vue不会销毁再创造这几个组件,而是复用这些组件,就是当第三次点击(如:user12三)的时候,vue
把相应的组件渲染出来,但在user1二3,
user45陆点击来回切换的时候,这些组件就不会发生变化了,组件的生命周期不管用了。这时要是想要在组件来回切换的时候做点事情,那么只可以在组件内部(user.vue中)利用watch
来监听$route 的改换。把下面的代码用监听$route 实现

必发88 32

exportdefault{

data () {return{

dynamicSegment:”}

},

watch: {

$route (to,from){//to代表的是您要去的不得了组件,from
表示的是你从哪个组件过来的,它们是七个目的,你能够把它打字与印刷出来,它们也有1个param
属性console.log(to);

console.log(from);this.dynamicSegment =to.params.id

}

}

}

必发88 33

嵌套路由

嵌套路由,首假设由咱们的页面结构所调节的。当大家进去到home页面包车型客车时候,它上边还有分类,如手提式有线电话机接2连3串,平板系列,计算机密密麻麻。当大家点击各种分类的时候,它照旧必要路由到种种部分,如点击手提式有线电电话机,它自然到相应到手提式有线电话机的一部分。

在路由的布署性上,首先进入到 home ,然后技能进来到phone, tablet, computer. 
Phone, tablet, compute 就也正是进入到了home的子成分。所以vue 
提供了childrens 属性,它也是一组路由,约等于我们所写的routes。

第三,在home页面上定义八个router-link
标签用于导航,然后再定义二个router-view标签,用于渲染对应的机件。router-link
和router-view 标签要每一种对应。home.vue 组件修改如下:

必发88 34

   

       

  这里还见到,当点击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>

 动态路由

home

       

            手机            平板            电脑       

           

必发88 35

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

必发88 36

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’}

]

必发88 37

那时当我们点击home
时,它上边出现手提式有线电话机等字样,但从没别的对应的机件进行展现,这一般不是我们想要的。要想点击home时,要想渲染相呼应的子组件,那还索要配备一条路由。当进入到home
时,它在children中对应的路由path 是空 ‘’,完整的childrens 如下:

必发88 38

children: [

{

path:”phone”,

component: phone

},

{

path:”tablet”,

component: tablet

},

{

path:”computer”,        component: computer    },

// 当进入到home时,下边包车型客车机件呈现    {        path:

“”,

component: phone

}

]

必发88 39

命名路由

取名路由,很简短,因为依据名字就能够理解,这一个路由有2个名字,那就一直给这些路由加叁个name
属性,就可以了。 给user 路由加一个name 属性:

{

path:”/user/:id”,

name:”user”,

component: user

}

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

User1二三 // 和底下等价

User  // 当使用对象作为路由的时候,to前边要加3个冒号,表示绑定

编制程序式导航:那第贰运用到开关点击上。当点击开关的时候,跳转另3个组件,
那只可以用代码,调用rourter.push() 方法。 当们把router
注入到根实例中后,组件中通过 this.$router 可以收获到router,
所以在组件中选用

this.$router.push(“home”), 就可以跳转到home分界面

2转载自

3

动态路由

官方网址给的例证是,差异的用户(正是用户的id不一致),它都会导航到同四个user 
组件中。那样我们在布局路由的时候,就不可能写死,
便是路由中的path属性,无法写死。如 path:
“/home”,唯有是home的时候,技巧展现home 组件,实施的是严厉相称。导航到
user 组件,路线中毫无疑问有user,

  上边我们定义的路由,都以严谨相配的,只有router-link 中的to属性和
js 中一条路由route中 path 壹模一样,本领彰显相应的组件component.
但有时候现实却不是那般的,当我们去访问网址并报到成功后,它会显得 应接您,+
你的名字。差异的用户登陆, 只是呈现“你的名字”
部分分化,其它一些是1模同样的。那就表示,它是二个零部件,假若是user组件。不一样的用户(便是用户的id分化),它都会导航到同一个user
 组件中。那样我们在安顿路由的时候,就不能够写死,
正是路由中的path属性,不能够写死,那要怎么设置? 导航到 user
组件,路线中势必有user, id 区别,那就给路线3个动态部分来合作区别的id.
 在vue-router中,动态部分 以 : 开端,那么路线就成为了 /user/:id,
那条路由就足以如此写:  { path:”/user/:id”, component: user }.

id 差异,这就给路线二个动态部分来合营差别的id. 动态部分 以 :
起初,那么路线就成为了 /user/:id, 那条路由就能够如此写: {
path:”/user/:id”, component: user }.

  大家定义1个user组件(自身无论写1个就好了),页面中再加多七个router-link
用于导航, 最后router.js中加多路由布署,来体验一下

再定义2个user组件,页面中增加多个router-link 用于导航,
router.js中加多路由布置。user组件随意写一个就好了。

  app.vue 中增多三个router-link:

app.vue 改动如下:

<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>
<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>

router.js 配置user动态路由:

router.js 更动如下:

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

  user组件

在动态路由中,假设我们想知道路由是从何地过来的,便是获取到动态部分咋做?
其实,当整个vue-router
注入到根实例后,在组件的其中,大家是能够通过this.$route.params
来收获这么些动态部分的。它是3个目的,属性名,正是路径中定义的动态部分 id,
属性值正是router-link中to 属性中的动态部分,如1二三。
在组件中,要是想要获取到state 中的状态,大家得以用computed
属性,在那边也是一致,在组件中,定义1个computed 属性dynamicSegment,
user 组件修改如下:

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

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

  这时在页面中式点心击user1二3 和user45陆,
能够看到它们都领航到user组件,配置不错。   

如上正是本文的全体内容,希望对咱们的就学抱有辅助,也希望大家多多扶助脚本之家。

  在动态路由中,怎么获取到动态部分?
因为在组件中是足以突显差别部分的,便是上面提到的“你的名字”。其实,当全体vue-router
注入到根实例后,在组件的里边,能够因而this.$route 来获得到 router
实例。它有叁个params
属性,正是来获得那些动态部分的。它是二个目标,属性名,正是路子中定义的动态部分
id, 属性值就是router-link中to
属性中的动态部分,如1二三。使用vuex时,组件中想要获取到state
中的状态,是用computed 属性,在此地也是同样,在组件中,定义八个computed
属性dynamicSegment, user 组件修改如下:

您或然感兴趣的稿子:

  • 化解vue router使用 history
    方式刷新后40四标题
  • Vue学习笔记进阶篇之vue-router安装及使用办法
  • vue
    router二.0二级路由的总结利用
  • 详解使用vue-router进行页面切换时滚动条地方与滚动监听事件
  • Vue.js:使用Vue-Router
    贰达成路由功用介绍
  • vue-router:嵌套路由的接纳格局
  • VueJs路由跳转——vue-router的运用详解
  • vue脚手架及vue-router基本采取
<template>
    <div>
        <h1>User</h1>
        <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
            dynamicSegment () {
                return this.$route.params.id
            }
        }
    }
</script>

  这里还有最终多个标题,就是动态路由在来往切换时,由于它们都是指向平等组件,vue不会销毁再创造那几个组件,而是复用那么些组件,正是当第一遍点击(如:user123)的时候,vue
把相应的组件渲染出来,但在user1二3,
user456点击来回切换的时候,这几个组件就不会发生变化了,组件的生命周期不管用了。那时假如想要在组件来回切换的时候做点事情,那么只可以在组件内部(user.vue中)利用watch
来监听$route 的生成。把地点的代码用监听$route 达成

<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 ,然后才干进来到phone, tablet,
computer.  Phone, tablet, compute 就一定于进入到了home的子成分。所以vue 
提供了childrens 属性,它也是壹组路由,也正是大家所写的routes。

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

<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>

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

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' 
    }
]

  那时当我们点击home
时,它上边出现手机等字样,但没有其余对应的零部件举办展示,这一般不是大家想要的。要想点击home时,要想渲染相对应的子组件,那还索要布置一条路由。当进入到home
时,它在children中对应的路由path 是空 ‘’,完整的childrens 如下:

children: [
    {
        path: "phone",
        component: phone
    },
    {
        path: "tablet",
        component: tablet
    },
    {
        path: "computer",
        component: computer
    },
    // 当进入到home时,下面的组件显示
    {
        path: "",
        component: phone
    }
]

命名路由

  取名路由,很简单,因为依据名字就能够知道,这几个路由有二个名字,那就一直给这几个路由加三个name
属性,就能够了。 给user 路由加二个name 属性:

{
        path: "/user/:id",
        name: "user",
        component: user
}

  命名路由的使用, 在router-link 中to 属性就足以应用对象了, 

 <router-link to="/user/123">User123</router-link> // 和下面等价 

 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 当使用对象作为路由的时候,to前面要加一个冒号,表示绑定

  编制程序式导航:这主要行使到开关点击上。当点击开关的时候,跳转另一个零部件,
这不得不用代码,调用rourter.push() 方法。 当们把router
注入到根实例中后,组件中经过 this.$router 能够得到到router,
所以在组件中利用

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

 

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图