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

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

时间: 2024-10-13 20:10:46

vue1与vue2的路由 以及vue2项目大概了解的相关文章

Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化

之前讲解的都是vue1.0的使用,现在我们开始介绍vue2.0,这里的介绍是在vue1.0的基础上进行介绍的,主要介绍的是同vue1.0版本相比2.0的变化 vue2.0动画的变化:现在变成: <transition> 运动东西(元素,属性,路由.....); </transition> class的定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 --当元素出来(显示) .fade-leave{} //可不写 .fade

vue2.0路由嵌套

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue2.0路由嵌套2</title> <script type="text/javascript" src="js/vue2.0.js" ></script> <script type="text/javascrip

vue2.0路由

现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js控制路由,goods.vue为跳转页面 app.vue template> <div id="app"> <v-header></v-header> <div class="tab"> <div class=&

vue2.0路由写法和传参

前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/[email protected]/dist/vue-router.js vue-router下载地址:https://github.com/vuejs/vue-router/tree/dev/dist vue2.0路由基本写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&

vue2.0 路由学习笔记

昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li a 为例 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 使用 rou

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

详解关于Vue2.0路由开启keep-alive时需要注意的地方

Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好. keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件

vue2.0 路由传参

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> <script src="../vue-router2.1.js"></script> </head> &

vue2.0 路由知识一

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> <script src="../vue-router2.1.js"></script> </head> &