路由
第一步
引入路由文件---> vue-router.js
第二步
准备路由所需组件,赋值给变量
第三步
创建路由对象,在这个对象里去配置路由对象
var router = new VueRouter({}) 这里new的对象是vue-router.js中封装好的只能用VueRouter
第四步
通过routes属性配置路由规则,它是一个数组,数组中存放对象,每个对象对应一条规则,而且每个对象里面都包含name(路由规则的名称)/path(表示路由跳转路径)/component(表示路由对应的组件)
第五步
在vue实例中注入路由,这样整个程序都拥有路由了
var vm = new Vue({
el: '#app',
// 第五步,在vue实例中注入路由,这样整个应用程序都会拥有路由了
router,
data: {
}
})
第六步
通过<router-view></router-view>"挖坑",路径匹配的组件会渲染到这个"坑"里来
备注:vue路由中通过router-link去做跳转,塔有一个to属性,to属性的值必须和path中的路径对应.router-link将来会在页面中被渲染成a标签,它的to属性会被渲染成a标签的href属性,但它的值前面会加一个#变为锚点
路由的参数
<li><router-link to="/product/1">蔬菜</router-link></li>
这里的路径后面的参数要在路由规则中path去设定
用path:"/product/:id" -------------> :(冒号)加参数名
在html中获取路由参数-->通过@route.params.参数名
在js中湖区路由参数-->通过 this.$route.params.参数名
监听路由参数变化
watch:{
$route(to,from){}
}
用 $route(to,from){}方法监听 两个参数 to from分别表示要去的路由对象和从哪个路由对象来的
注: if(to.params.id ==="1"){
this.zx="茄子,辣子,西红柿,再加一碗蒜苗子!"
}
这里拿(to.params.id ==="1")判断第一次点击是无法监听的,因为第一次 才给to才获取到值无法判断
可以再mounted函数中用 (this.$route.params.id ==="1")先做判断渲染
