vue 知识总结

//安装vue-cli
npm install -g vue-cli

//利用脚手架初始化项目
vue init webpack vue_project

const Layouts = () => import('@/views/Layouts')
const Detail = () => import('@/views/orderManagement/Detail')
const List = () => import('@/views/orderManagement/List')
const OrderRouter = [
  {
    path: '/cost',
    redirect: '/cost/order-list',
    component: Layouts,
    children: [
      {
        path: 'order-list',
        component: List
      },
      {
        path: 'order-detail',
        component: Detail
      }
    ]
  }
]
export default OrderRouter


// 这样写，组件 List 和组件 Detail 都是挂载在组件 Layouts 之下
// 前提是 Layouts 组件要写上 <router-view></router-view> 才可以挂载子组件

<router-link 
    :to="{
        path: 'yourPath', 
        params: { 
            id: id, 
            dataObj: data
        },
        query: {
            id: id, 
            dataObj: data
        }
    }">
</router-link>

path -> 是要跳转的路由路径，也可以是路由文件里面配置的 name 值，命名路由，两者都可以进行路由导航
params -> 是要传送的参数，参数可以直接key:value形式传递（类似post）
query -> 是通过 url 来传递参数的同样是key:value形式传递（类似get）
接收参数：
this.$route.query.id
this.$route.params.id
路由的配置
{
  path:'/admin/:username', // :冒号后面是参数
  component:() => import('../components/Admin.vue'),
  name:"admin",
  meta:{title:'个人中心'},
},

this.$router.push({
  name: 'dispatch',
  params: {
    paicheNo: obj.paicheNo
  }
})

this.$router.push({
  path: '/transport/dispatch',
  query: {
    paicheNo: obj.paicheNo
  }
})
// or
this.$router.push({
  name: 'dispatch',
  query: {
    paicheNo: obj.paicheNo
  }
})

this.$router.push({ query: {paicheNo: obj.paicheNo }})
this.$router.push({ params: {paicheNo: obj.paicheNo }})

watch:{
    //监听相同路由下参数变化的时候，从而实现异步刷新
    '$route'(to,from){
        //做一些路由变化的响应
        this.loading = true;//打开加载动画
        this.getCateShop();//重新获取数据
    },
},

//在进入路由之前， 每一次都会执行此方法  全局钩子
router.beforeEach(function(to,from,next){
  //设置网页标题
  document.title = to.meta.title;
  //检查是否已登录
  let userObj = JSON.parse(sessionStorage.getItem('user'));
  if(userObj){
    //执行方法，将用户名设置进全局参数  vuex
    //提交mutation的Types.SETUSERNAME方法
    //第二个参数是携带的参数
    //main.js使用vuex的提交方法，不需要this.$store.commit()，直接就store.commit()
    store.commit(Types.SETUSERNAME,userObj.username);
  }else{
    //如果未登录，想要进入admin目录，则自动跳回首页
    if(to.path.indexOf('admin') != -1){
    //   alert("进了");
      router.push({name:'home'});
    }
  }
  next(); //继续往下走
});

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
  	{
      path:'/',
      redirect:'/home'
    },
    {
      path:'/login',
      component: () => import('../components/Login.vue'),
      meta:{title:'登录'}
    },
    {
      path:'/register',
      component: () => import('../components/Register.vue'),
      meta:{title:'注册'}
    },
  	{
      path:'/home',
      component: () => import('../components/Home.vue'),
      name:"home",
      meta:{title:'首页'}
    },
  ]
})

export default {
  components: {
    SectionHeader: () => import('@/components/SectionHeader'),
    SectionArticle: () => import('@/components/SectionArticle'),
    NoResult: () => import('./NoResult'),
  }
}

文件：components/index.js
// 全局注册的组件
import MyHeader from './Header';
import MyFooter from './Footer';
import NotFound from './NotFound';

export default {
  MyHeader,
  MyFooter,
  NotFound,
};


文件：main.js
// 加载全局组件
import components from './components';
// 注册全局组件
Object.keys(components).forEach(key => {
  Vue.component(key, components[key]);
});

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/' },
    // params are denoted with a colon ":"
    // 必传参数
    { path: '/params/:foo/:bar' },
    // a param can be made optional by adding "?"
    // 可有可无的参数
    { path: '/optional-params/:foo?' },
    // a param can be followed by a regex pattern in parens
    // this route will only be matched if :id is all numbers
    // 匹配正则
    { path: '/params-with-regex/:id(\\d+)' },
    // asterisk can match anything
    // 匹配后面所有
    { path: '/asterisk/*' },
    // make part of th path optional by wrapping with parens and add "?"
    // 括号内路径可有可无
    { path: '/optional-group/(foo/)?bar' }
  ]
})

<table>
  <my-row>...</my-row>
</table>

<table>
  <tr is="my-row"></tr>
</table>