1、匹配404错误:
在路由规则中,* 代表的是任意字符。所以只要在路由的最后添加一个路由,那么以后没有匹配到的url都会被导入到这个视图中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/profile">个人主页</router-link>
<!-- 路由匹配到的组件将渲染到这里 vue-router的出口 -->
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//component 有组件名字 extend是没有组件的名字的
var index = Vue.extend({template: "<h1>这是首页</h1>"}) //{}里面是个对象,
var profile = Vue.extend(
{template: "<h1>这是个人主页{{$route.params.userid}}</h1>", //输出动态绑定的路由id
mounted(){
console.log(this.$route) //输出路由中的参数数据
console.log(this.$router) //加强版本输出数据项目
console.log(this.$route.params.userid)
if(this.$route.params.userid != '123'){ //判断id是否等于
this.$router.replace('/404')
}
}
})
//vue-router
var router = new VueRouter({
routes:[ //这里的routes需要注意,不同于其他
{path:"/", component:index},
{path:"/profile/:userid", component:profile}, // 动态绑定id /:userid
{path:"*", component:notfound}, // * 通配符 notfound匹配找不到的页面
{path:"/404", component:notfound}, //notfound匹配找不到的页面
],
})
new Vue({
el:"#app",
data:{
},
router:router //router 是关键字
})
</script>
2、嵌套路由:
有时候在路由中,主要的部分是相同的,但是下面可能是不同的。比如访问用户的个人中心是/user/profile/,查看用户发的贴子是/user/posts/等。这时候就需要使用到嵌套路由。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"></link>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/profile">个人主页</router-link>
<!-- 路由匹配到的组件将渲染到这里 vue-router的出口 -->
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//component 有组件名字 extend是没有组件的名字的
var index = Vue.extend({template: "<h1>这是首页</h1>"}) //{}里面是个对象,
var profile = Vue.extend(
{template: `
<div>
<h1>这是个人主页{{$route.params.userid}}</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<router-link to="/user/123/setting">设置选项</router-link>
</li>
<li role="presentation">
<router-link to="/user/123/message">消息选项</router-link>
</li>
</ul>
</div>
`})
var setting = Vue.extend({template:"<h1>设置</h1>"})
var mesage = Vue.extend({template:"<h1>消息</h1>"})
//vue-router
var router = new VueRouter({
routes:[ //这里的routes需要注意,不同于其他
{path:"/", component:index},
{
path:"/:userid",
component:profile,
children:[ //嵌套路由的核心部分
//访问默认界面
{path:"", component:setting},
//访问界面其他选项
{path:"setting", component:setting},
{path:"message", component:mesage},
]
},
//{path:"/profile/:userid/setting", component:setting},
],
})
new Vue({
el:"#app",
data:{
},
router:router //router 是关键字
})
</script>
显示界面如下:
3、编程式导航
之前我们学习了使用 <router - link> 可以在用户点击的情况下进行页面更新。但有时候我们想要在js中手动的修改页面的跳转,这时候就需要使用编程式导航了。
$router.push跳转:
想要导航到不同的URL,则使用router.push方法。这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。
当你点击时,这个方法会在内部调用,所以说,点击<router -link :to="…">等同于调用router.push(…)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="gotoPost">列表</button>
<button @click="gotofile">文件</button>
<button @click="login">登录</button>
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//component 有组件名字 extend是没有组件的名字的
var post = Vue.extend({template: "<h1>首页</h1>"}) //{}里面是个对象,
var profile = Vue.extend({template:"<h1>个人中心</h1>"})
var login = Vue.extend({template:"<h1>登录界面</h1>"})
//vue-router
var router = new VueRouter({
routes:[ //这里的routes需要注意,不同于其他
{path:"/post", component:post},
{path:"/profile", component:profile, name:"myprofile"},
{path:"/login", component:login, name:"login"},
],
})
new Vue({
el:"#app",
router:router,
methods:{
gotoPost:function(){
this.$router.push("/post")
},
gotofile:function(){
//this.$router.push("/profile") //下面的是另一种形式转到url尾部为new_userid
this.$router.push({name:"myprofile",params:{userid:"new_userid"}})
},
login(){
//wd?python 网页url显示为:/login?wd=python
this.$router.push({path:"login", query:{wd:"python"}})
},
}
})
</script>
声明式 | 编程式 |
---|---|
<router -link :to="…"> | router.push(…) |
// 字符串
router.push(‘home’)
// 对象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})
// 带查询参数,变成 /register?plan=private
router.push({ path: ‘register’, query: { plan: ‘private’ }})
注意:如果提供了path,params会被忽略,上述例子中的query并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的name或手写完整的带有参数的path:
const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path:/user/${userId}
}) // -> /user/123
// 这里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user
router.replace(location, onComplete?, onAbort?):
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n)。
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默认失败
router.go(-100)
router.go(100)
4、命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建Router实例的时候,在routes配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给router-link的to属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事:
router.push({ name: 'user', params: { userId: 123 }})
实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- :to 冒号很重要 -->
<router-link v-bind:to="{name:'index'}">HOME</router-link>
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var home = Vue.extend({template:"<h1>首页</h1>"})
var router = new VueRouter({
routes:[
{path:"/", name:"index", component:home}
]
})
new Vue({
el:"#app",
router:router,
})
</script>
5、命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航) 和main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view没有设置名字,那么默认为default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用components配置 (带上s):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="header">
<router-view name="header"></router-view>
</div>
<div class="body">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<div class="footer">
<router-view name="footer"></router-view>
</div>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
headerc = Vue.extend({template:"<h1>header部分</h1>"})
leftc = Vue.extend({template:"<h1>left部分</h1>"})
rightc = Vue.extend({template:"<h1>right部分</h1>"})
footerc = Vue.extend({template:"<h1>footer部分</h1>"})
var router = new VueRouter({
routes:[
{path:"/", components:{ //这里components是需要加s的
header:headerc,
left:leftc,
right:rightc,
footer:footerc,
}}
]
})
new Vue({
el:"#app",
router:router,
})
</script>
6、重定向和别名
重定向也是通过routes配置来完成,下面例子是从/a重定向到/b:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 加载vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var article = Vue.extend({template:"<h1>这是文章</h1>"})
var router = new VueRouter({
routes:[
// redirect重定向 重定向至后面的地址 /article
{path:"/", redirect:"/article"},
// alias:"/list" 路由重新取名字 地址改为/list 显示界面也和上面一样
{path:"/article", component:article, alias:"/list"},
]
})
new Vue({
el:"#app",
router:router,
})
</script>
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
“重定向”的意思是,当用户访问/a时,URL将会被替换成/b,然后匹配路由为/b。
/a的别名是/b,意味着,当用户访问/b时,URL会保持为/b,但是路由匹配则为/a,就像用户访问/a一样。
上面对应的路由配置为:
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
7、node环境配置
nvm安装:
nvm(Node Version Manager) 是一个用来管理node版本的工具。我们之所以需要使用node,是因为我们需要使用node中的 npm(Node Package Manager),使用npm的目的是为了能够方便的管理一些前端开发的包!nvm的安装非常简单,步骤如下:
- 到这个链接下载nvm的安装包:https://github.com/coreybutler/nvm-windows/releases
- 然后点击一顿下一步,安装即可,安装完成后,还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个,把nvm所处的路径填入进去即可。
- 打开cmd,然后输入nvm,如果没有提示没有找不到这个命令。说明已经安装成功
Mac或者Linux安装nvm请看这里:https://github.com/creationix/nvm。也要记得配置环境变量
nvm常用命令
nvm常用命令:
nvm install [version] :安装指定版本的node.js。
nvm use [version] :使用某个版本的node。
nvm list :列出当前安装了哪些版本的node。
nvm uninstall [version] :卸载指定版本的node。
nvm node_mirror [url] :设置nvm的镜像。
nvm npm_mirror [url] :设置npm的镜像。
node安装:
安装完nvm后,我们就可以通过nvm来安装node了。这里我们安装10.16.0版本的的`node.js。
nvm install 10.16.0
这个域名的服务器是在国外。因此会比较慢,我们可以设置一下nvm的源,之后再下载指定版本。
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
npm
npm(Node Package Manager) 在安装node的时候就会自动的安装了。当时前提条件是你需要设置当前的node的版本:nvm use 10.16.0。然后就可以使用npm了.
初始化:
在新的项目中,需要先执行 npm init 初始化,创建一个package.json文件用来保存本项目中用到的包。
安装包:
安装包分为全局安装和本地安装。全局安装是安装在当前node环境中,在可以在cmd中当作命令使用。而本地安装是安装在当前项目中,只有当前这个项目能使用,并且可以通过require引用。安装的方式只有-g参数的区别:
npm install vue # 本地安装
npm install vue --save # 本地安装,并且保存到package.json的dependice中
npm install vue --save-dev # 本地安装,并且保存到package.json的dependice-dev中
npm install vue -g #全局安装
npm install -g @vue/cli #全局安装vue-cli
本地安装
1、将安装包放在./node_modules下(运行 npm 命令时所在的目录),如果没有node_modules目录,会在当前执行npm命令的目录下生成node_modules目录。
2、可以通过require()来引入本地安装的包。
全局安装
1、将安装包放在/usr/local下或者你node的安装目录。
2、可以直接在命令行里使用。
卸载包:
npm uninstall [package]
更新包:
npm update [package]
搜索包:
npm search [package]
使用淘宝镜像:
npm的服务器在国外。那么可以安装一下cnpm,并且指定镜像为淘宝的镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后就可以使用cnpm来安装包了.
手动安装npm:
有时候使用nvm安装完node后,npm没有跟着安装,这时候可以到https://github.com/npm/cli/releases下载6.10.1的版本。然后下载完成后,解压开来,放到v10.16.0/node_modules下,然后修改名字为npm,并且把npm/bin中的npm和npm.cmd两个文件放到v10.16.0根目录下。
8、vue-cli的使用
vue-cli是和vue进行深度组合的工具,可以快速帮我们创建vue项目,并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目,都是用vue-cli来创建项目的。
安装:
Vue CLI需要Node.js 8.9或更高版本 (推荐8.11.0+)。node环境安装后,直接通过npm install -g @vue/cli即可安装。安装完成后,输入vue --version,如果出现了版本号,说明已经下载完成。
用命令行创建项目:
1、在指定路径下使用vue create [项目名称]创建项目。
2、会让你选择要安装哪些包(默认是Babel和ESLint),也可以手动选择。
3、如果在安装的时候比较慢,可以在安装的时候使用淘宝的链接:vue create -r https://registry.npm.taobao.org [项目名称]。
4、如果实在不想在创建项目的时候都指定淘宝链接,可以在当前用户目录下,找到.npmrc,然后设置registry=https://registry.npm.taobao.org。
用界面创建项目:
打开cmd,进入到你项目存储的路径下。然后执行vue ui,就会自动打开一个浏览器界面。
按照指引进行选择,然后一顿下一步即可创建。
项目结构介绍
node_modules ---------------------------:本地安装的包的文件夹。
public ---------------------------------------:项目出口文件。
src -------------------------------------------:项目源文件:
assets----------------------------------------:资源文件,包括字体,图片等。
components--------------------------------:组件文件。(项目中可以编写的部分)
App.vue-------------------------------------:入口组件。
main.js--------------------------------------:webpack在打包的时候的入口文件。
babel.config.js----------------------------:es*转低级js语言的配置文件。
package.json-----------------------------:项目包管理文件。
运行该vue-cli项目操作:
网页界面显示如下:
组件定义和导入:
1、定义:组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到.vue的template标签中,所以不再需要在定义组件的时候传入template参数。另外,因为需要让别的组件使用本组件,因此需要用export default将组件对象进行导出。
2、导入:因为现在组件是在不同的文件中。所以如果需要引用,那么必须进行导入。用ES6语法的import XXX from XXX。
局部样式
默认情况下在.vue文件中的样式一旦写了,那么会变成全局的。如果只是想要在当前的组件中起作用,那么可以在style中加上一个scoped属性即可。示例代码如下:
// 这里是组件的格式
<style scoped>
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} */
body{
/* 内外边距 */
margin:0;
padding: 0;
/* 字体大小 */
font-size: 80px;
}
</style>
使用sass语法
很多在写样式代码的时候,不喜欢用原生css,比较喜欢用比如sass或者less,这里我们以sass为例,我们可以通过以下两个步骤来实现:
安装loader:webpack在解析scss文件的时候,会去加载sass-loader以及node-loader,因此我们首先需要通过npm来安装一下:
npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev
指定sass语言:在指定style的时候,添加lang="scss"属性,这样就会将style中的代码识别为scss语法。
//style这个模块就是制定组件的格式
<style lang="stylus"> //这里的lang="stylus"就是指定的语法
</style>