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