vue1的路由

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

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

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

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

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

6、配置默認選項 ?router.redirect("/","/home")

?

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

?

vue2的路由

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

1、導入vue

2、定義組件

3、Vue調用vue-router插件

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

5、實例化路由

6、實例化路由&&視圖

//導入vue import Vue from "vue" //定義組件 import VueRouter from "vue-router"; //vue調用vue-router插件 Vue.use(VueRouter) //定義組件 const first={template:"<h2>First</h2>"} const second={template:"<h2>Second</h2>"} const third={template:"<h2>Third</h2>"} //實例路由 const router=new VueRouter({ mode:"history", // 模式 base:__dirname, //相對路徑 routes:[ {path:"/first",component:first}, {path:"/second",component:second}, {path:"/third",component:third}, ] }) //實例化 new Vue({ router, template: //模板字符串 ` ? ?------> ? ? ?// 模板字符串 ? ? ? ? ? ?重要重要重要重要重要重要 <div> <--必須加一個容器--> <h2>導航</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項目就跟大家 ?說一說vue項目的創建吧

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

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

第三步進入項目 ? cd ?project

第四步安裝依賴 ?這是重要的如果不安裝 可能出問題 ? npm install ? ?如果咱們拷貝別人的項目必須在安裝一次項目依賴 ? 因為每臺電腦都不一樣 ?需要安裝的依賴不一樣

第五步 啟動項目 ?npm run dev

最后一步 ?就是 ?項目完成了 ?那就打包（內容有點多就不寫了）

?

啟動項目后出現的shi下圖 ?恭喜你創建項目success

?

?

?

轉載于:https://www.cnblogs.com/calledspeed001/p/7096643.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。