vue1与vue2的路由 以及vue2项目大概了解

Posted 2020-09-26 闷骚的少年

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