Vue-cli and Vue-router基本使用

vue-cli

准备工作

1. 下载node.js
2. 下载vue-cli脚手架 npm install vue-cli -g
3. 下载webpack打包工具 npm install webpack -g
4. 其余所需到网上下载并学习

vue-router

基础语法

1. <router-link to="/url"></router-link>
   <router-link to="url"></router-link>
   //带参
   <router-link :to="name : 'urlName' , params : {id :1 }"
   

2. //导入vue 与 VurRouter
   import Vue from 'vue'
   import VueRouter from "vue-router";
   //导入组件
   import User from '../components/user'
   /*安装router*/
   Vue.use(VueRouter);
   //进行配置
   export default new VueRouter({
   
     routes: [
       {
         /*跳转路径*/
         path: '/url',
         /*跳转名称*/
         name: 'urlName',
         /*跳转组件*/
         component: urlName,
       },
       //带参
       {
           path: '/url/:id',
           name: 'urlName',
           component : UerName
           props : true
       },
       //路由嵌套
      	{
           path: '/url/:id',
           name: 'UerName',
           component : UerName,
           children:[
               {
                  path: 'url/smallUrl/:id',
                  name: 'smallUrlName',
                  component : smallUrlName
               }
           ]
       },
       //重定向
       {
           path:'/urlName',
           redirect:'url'
       }
     ]
   
   });
   
   

3. //接参vue
   <<template>
   
       <h1>aaaa{{id}}</h1>
   
   </template>
   
   <script>
       export default {
           name: "User",
           props:['id']
       }
   </script>