首页 > 代码库 > vue1与vue2的路由 以及vue2项目大概了解
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
vue1与vue2的路由 以及vue2项目大概了解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。