vue中创建路由的步骤 以及参数的biaoda

1.  先导入路由文件前提是还要到入Vue.js的文件,  在网站就有网址 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2.  准备路由需要的组件
3.  创建路由对象,在这个对象里配置路由规则
4.  通过routes属性配置路由规则，它是一个数组，数组中放的是对象，每个对象对应一条规则，并且每个对象里面都包含有name(表示路由规则的名称)/path(表示路径)/component(表示路径对应的组件)
5. 在vue实例中注入路由，这样整个应用程序都会拥有路由了
6. 通过router-view挖坑，路径匹配到的组件都会渲染到这个坑里面来 
  <router-view></router-view>

具体步骤

• 1. <div id="app">
     <ul>
     <li><router-link to="/index">铃木</router-link></li>
     <li><router-link to="/product">本田</router-link></li>
     <li><router-link to="/productType">春风</router-link></li>
     <li><router-link to="/indexHome">雅马哈</router-link></li>
     </ul>
     通过 <router-view></router-view> 挖坑,路径将配合到这个坑里来
     <router-view></router-view>
     </div>
     <script>
     // 创建必须的路由组件
     var index = Vue.component('index', {
     template: <div>你是瓜子</div>,
     })
     var indexHome = Vue.component('indexHome', {
     template: <div>who are you {{$route.params.id}}</div>,
     mounted() {
     console.log(route.params
     }
     })
     var product = Vue.component('product', {
     template: <div>它是傻子 {{$route.params.id}}</div>,
     mounted() {
     console.log(route.params
     }
     })
     var productType = Vue.component('productType', {
     template: <div>你是风儿 {{$route.params.id}}</div>,
     mounted() {
     console.log(route.params
     }
     })
     // 创建路由对象
     var router = new VueRouter({
     // 通过routers这个数组里面的对象
     routes : [
     {name:'index', path: '/index', component: index},
     {name:'product', path: '/product/:id', component: product},
     {name:'productType', path:'/productType/:id', component: productType},
     {name:'indexHome', path:'/indexHome/:id', component: indexHome}

      ]
     

     })
     // 在M中注入实例
     var Vm = new Vue({
     el:'#app',
     router: router,
     data : {

      }
     

     })
     </script>