路由

第一步

引入路由文件--->  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")先做判断渲染