路由，其实就是指向的意思，当我点击页面上的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界面