vue-router

路由,其实就是指向的意思,当我点击页面上的home  按钮时,页面中就要显示home的内容,如果点击页面上的about

exportdefault{

data () {return{

dynamicSegment:''}

},

watch: {

$route (to,from){//to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象,你可以把它打印出来,它们也有一个param 属性console.log(to);

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

}

}

}

嵌套路由

嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,它下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到手机的部分。

在路由的设计上,首先进入到 home ,然后才能进入到phone, tablet, computer.

Phone, tablet, compute 就相当于进入到了home的子元素。所以vue  提供了childrens

属性,它也是一组路由,相当于我们所写的routes。

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



home


            手机            平板            电脑       


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

const routes =[

{

path:"/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 属性就可以使用对象了,

User123 // 和下面等价

User

编程式导航:这主要应用到按钮点击上。当点击按钮的时候,跳转另一个组件, 这只能用代码,调用rourter.push() 方法。 当们把router 注入到根实例中后,组件中通过 this.$router 可以获取到router, 所以在组件中使用

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

推荐阅读更多精彩内容