vue1的路由

1、設(shè)置根組件 ?Vue.extend()

2、設(shè)置局部組件 ?Vue.extend({template:"/home"})

3、實(shí)例化路由 ? var router =new VueRouter()

4、關(guān)聯(lián)路由 ? ? ?router.map({"./",組件名字})

5、開啟路由 ? ? router。start（“根組件”，“#box“）

6、配置默認(rèn)選項(xiàng) ?router.redirect("/","/home")

?

<script> //設(shè)置根組件 var root = Vue.extend(); //設(shè)置局部組件 例子有三個(gè)局部組件 var Home = Vue.extend({ template: "<h2>首頁</h2>" }); var About = Vue.extend({ template: "<h2>關(guān)于</h2>" }); var New = Vue.extend({ template: "<h2>新聞</h2>" }); //實(shí)例路由 var router = new VueRouter(); //關(guān)聯(lián)路由 router.map({ "home": { component: Home }, "about": { component: About }, "new": { component: New } }); //開啟路由 router.start(root, "#box"); //配置默認(rèn)項(xiàng) router.redirect({ "/": "/home" }) </script> 現(xiàn)在用vue1的項(xiàng)目很少了 ?大多都用vue2de項(xiàng)目

?

vue2的路由

vue2的路由 與vue1的路由 有一部分相同 ?意思一樣

1、導(dǎo)入vue

2、定義組件

3、Vue調(diào)用vue-router插件

4、定義組件（與定義局部組件意思大概一樣）

5、實(shí)例化路由

6、實(shí)例化路由&&視圖

//導(dǎo)入vue import Vue from "vue" //定義組件 import VueRouter from "vue-router"; //vue調(diào)用vue-router插件 Vue.use(VueRouter) //定義組件 const first={template:"<h2>First</h2>"} const second={template:"<h2>Second</h2>"} const third={template:"<h2>Third</h2>"} //實(shí)例路由 const router=new VueRouter({ mode:"history", // 模式 base:__dirname, //相對路徑 routes:[ {path:"/first",component:first}, {path:"/second",component:second}, {path:"/third",component:third}, ] }) //實(shí)例化 new Vue({ router, template: //模板字符串 ` ? ?------> ? ? ?// 模板字符串 ? ? ? ? ? ?重要重要重要重要重要重要 <div> <--必須加一個(gè)容器--> <h2>導(dǎo)航</h2> <div> <ul> <li><router-link to="/first">first</router-link></li> <li><router-link to="/second">second</router-link></li> <li><router-link to="/third">third</router-link></li> </ul> <div> <router-view></router-view> </div> </div> </div> ` }).$mount("#app") ?<!--這里掛載app--> main.js 中這樣寫

?

?

今天寫vue1和vue2 想起了vue項(xiàng)目就跟大家 ?說一說vue項(xiàng)目的創(chuàng)建吧

第一步咱們先把 腳手架安裝好 ? 這是前提前提 ? npm install -g vue-cli ?全局的 安裝一次就好了

第二步初始化項(xiàng)目 ?vue init webpack ?project(這是項(xiàng)目的名字)

第三步進(jìn)入項(xiàng)目 ? cd ?project

第四步安裝依賴 ?這是重要的如果不安裝 可能出問題 ? npm install ? ?如果咱們拷貝別人的項(xiàng)目必須在安裝一次項(xiàng)目依賴 ? 因?yàn)槊颗_(tái)電腦都不一樣 ?需要安裝的依賴不一樣

第五步 啟動(dòng)項(xiàng)目 ?npm run dev

最后一步 ?就是 ?項(xiàng)目完成了 ?那就打包（內(nèi)容有點(diǎn)多就不寫了）

?

啟動(dòng)項(xiàng)目后出現(xiàn)的shi下圖 ?恭喜你創(chuàng)建項(xiàng)目success

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/calledspeed001/p/7096643.html

總結(jié)

以上是生活随笔為你收集整理的vue1与vue2的路由 以及vue2项目大概了解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。