vue路由

###1.路由
路由的本质就是对应关系。
后端路由，后台提供url地址，每一个url地址对应的就是后台所提供的一个功能
传统的web网站中，是通过请求后台url地址来使用后台提供的功能。
为了让浏览器能记住用户所做的操作，SPA(single page application)单页应用。
所有网站内容都呈现在一个页面中。
在SPA中，点击导航，点击按钮，就会根据用户点击的内容，来执行相应的事件处理函数。
这种事件对应内容的形式就是前端路由。

前端路由的实现主要依靠是hash值(锚点连接)。

###2.模拟路由
监听hash值变化的事件 ： onhashchange
组件占位符：

前端路由的原理就是通过hash值的变化来展示不同的内容。

###3.Vue Router
是Vue.js官方提供的路由管理器，如果要去实现Vue的路由，推荐使用Vue Router

###4.使用Vue-Router实现前端路由的步骤
A.导入js文件
B.添加路由链接
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
D.定义路由组件
E.配置路由规则并创建路由实例
F.将路由挂载到Vue实例中

补充：路由重定向
在路由规则中来通过redirect属性设置重定向
const myRouter = new VueRouter({
//routes数组中包含了所有的路由规则
routes:[
{ path:"/" , redirect:"/index" },
{ path:"/login", component:Login },
{ path:"/register", component:Register },
{ path:"/index", component:Index },
{ path:"/category", component:Category }
]
})

###5.嵌套路由
详情请见02嵌套路由.html

###6.动态路由
当设置路由链接的时候，路由的地址一部分是动态变化的(比如说id是动态变化)，一部分是固定不变的。
如果我们为这种路由来设置路由规则，可以使用动态路由。
{ path:"/product/:id/:name", component:Product }

在路由组件Product中如何来接收动态变化的id呢？
$route.params.id
$route.params.name

补充：
使用动态路由匹配从路由规则来传递数据给子组件。
A.当我们将路由规则中的props属性设置为true的时候，如下：
{ path:"/product/:id", component:Product, props:true }
我们可以通过组件的props属性来接收地址中传递的id参数
var Product = {
props:[ ‘id’ ],
template:"

{{id}}

"
}
B.当我们将路由规则中的props属性设置为对象的时候，向子组件传递的就是对象中的数据，如下：
{ path:"/product/:id", component:Product, props:{ uname:“jack”,pwd:123 } }
我们可以通过组件的props属性来接收传递的对象中的数据
var Product = {
props:[ ‘uname’,‘pwd’ ],
template:"

{{uname}} {{pwd}}

"
}
C.当我们将路由规则中的props属性设置为函数的时候，向子组件传递的就是函数的返回值中的数据，如下：
{ path:"/product/:id", component:Product, props: route=>{ return { uname:“rose”, id: route.params.id } } }
我们可以通过组件的props属性来接收传递的函数返回值中的数据
var Product = {
props:[ ‘uname’,‘id’ ],
template:"

{{uname}} {{id}}

"
}