Vue学习笔记

Vue学习笔记

1. 创建项目

npm install -g @vue/cli
vue create hello-world

2. Vue Router

// 安装包
npm install vue-router

// main.js
import Router from 'vue-router'
Vue.use(Router)

// path: '/' 代表首页
// 这里需要有name, 
const routes = [
  { name: 'AnimalList', path: '/', component: AnimalList },
  { name: 'AnimalDetail', path: '/animal/:id', component: AnimalDetail}
]

// 用name这样参数才会被详情页面接收到
// 如果使用了path,params会被忽略
this.$router.push({
        name: "AnimalDetail",
        params: {
          name: row.name
        }
      })

Issues&Solutions

1. Vue运行环境配置: Compiler版本和Runtime 版本
  • Issue
    main.js中添加