一:创建项目
- 在桌面创建一个新的文件夹,点开新建文件夹在地址位置输入cdm打开黑窗口,然后子啊黑窗口中输入vue create 项目名 创建一个项目。
- 选择要创建项目的类型 这里我通过方向键的上下键选择最后一个的自定义类型
- 对项目中需要的内容进行选择 通过空格来进行选择和取消选择
- 选择vue.js的版本 这里我们选择vue2.x的版本 通过方向键来进行选择
- 选择路由的模式 输入y就是选择了history模式 ,输入n就是选择了hash模式 我们现在hash模式输入n
- 选择css的预处理器 我们选择less
- 选择是否把设置的文件单独放在一个文件夹中还是放在package.json文件夹里 这里我们选择放在一个文件夹中
- 选择是否把刚刚的设置保存下来 如果保存下来输入y回车在输入名字 如果不需要保存下来就输入n
- 现在项目成功创建好了 系统提示了两句话 一句是 “cd project02”表示进入这个项目 “npm run serve” 运行项目 依次输入着两句话
- 在将黑窗口返回的网址复制到浏览器上进行查看
二:vue-router
vue-router是基于路由和组件的
- 路由用户设定访问路径的,将路径和组件映射起来。
- 在vue-router的单页面应用中,页面的路径的改变就是组件的切换
vue-router实现原理
SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式。
1、Hash模式:
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
2、History模式:
由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
router-link
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过
to
属性指定目标地址,默认渲染成带有正确链接的<a>
标签,可以通过配置tag
属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
to
类型:
string | Location
required
表示目标路由的链接。当被点击后,内部会立刻把
to
的值传到router.push()
,所以这个值可以是一个字符串或者是描述目标位置的对象。
active-class
类型:
string
默认值:
"router-link-active"
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项
linkActiveClass
来全局配置。
router-view
<router-view>
组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view>
渲染的组件还可以内嵌自己的 <router-view>
,根据嵌套路径,渲染嵌套组件。
name
类型:
string
默认值:
"default"
如果
<router-view>
设置了名称,则会渲染对应的路由配置中components
下的相应组件。
vue-router核心要点
vue-router如何参数传递
①用name传递参数
在路由文件src/router/index.js里配置name属性
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
②通过<router-link>
标签中的to传参
这种传参方法的基本语法:
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
③vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。
我们在/src/router/index.js文件里配置路由
{
path:'/params/:newsId/:newsTitle',
component:Params
}