项目路由
前端路由:核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
ui-router:锚点值改变,如何获取模版?ajax
vue中,模版数据不是通过ajax请求来,而是调用函数获取模版内容
核心:锚点值改变
以后看到vue开头,就必须知道Vue.use
Vue-router(路由),Vuex(管理全局共享数据)
使用方式
1:下载 npm i vue-router -S
2: 引入,在main.js中引入 import VueRouter from 'vue-router'
3:安装插件 Vue.use(插件) Vue.use(VueRouter)
4:需要配置路由规则,需要个路由对象
let router=new VueRouter({routes:[path:'/home',component:Home} ] });
5:将其路由对象传递给Vue的实例,options中 router : router
6:留坑 <router-view></ruoter-view>
//引入一堆
import Vue from 'vue'
import VueRouter from 'vue-router'
//主体
import App from './components/app.vue'
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router=new VueRouter({
routes:[
//一个个对象
{path:'/',component:Home}
]
})
//new Vue启动
new Vue({
el: '#app',
//让vue知道我们的路由规则
router:router, //可以简写成router
render:c=>c(App);
})
错误整理
1:Module not found:Error:Can't resolve 'vue-router'
可能是因为没安装好,
2:Uncaught Error:Cannot find module "vue-router"
没有装载vue-router, Vue.use(vue-router) 或者 npm i vue-router -S
3:Module not found:Error:Can`t resolve 'less-loader'
在子组件中的样式里加了代码
<style lang="less" scoped>
</style>
而这个less是需要安装的,npm install --save-dev less-loader less
https://www.npmjs.com/package/less-loader
所以不想安装的话可以直接删掉,若要用就要安装,否则就报错
4:webpack后,出现htmlWebpackPlugin is not defined
说明没有声明htmlWebpackPlugin对象
const htmlWebpackPlugin=requrie('html-webpack-plugin')
5:Error:missing script: dev
在package.json中没有这个命令,加入就好
重点:没有留坑和规则不匹配,当没显示的时候可能的原因
基于webpack编译,就要打包
vue2.0入门及实战开发(五)
最新推荐文章于 2023-06-04 22:41:59 发布