Vue-路由1 路由的基本使用
一、概念
问:前端路由是什么?
答:在单页面应用中,前端路由是用来实现不同页面的切换,在单个页面中展示不同的内容(组件)。实现原理:通过url中的hash(#号)来实现的,http请求中不会包含hash的内容。
二、代码示例
注意:
- 导入vue-router:导入vue-router.js前,先导入vue.js,因为vue-router.js依赖于vue.js
- 路由实例:创建路由实例时,给routes赋值,routes是一个数组,数组中的每个项是一个对象,对象中有两个属性,path和component,path表示要监听的url地址,component表示path对应的组件,并且component只能是组件模板,而不是组件,不能为字符串
- 注册路由:在Vue实例中要注册路由,router: 路由实例
- a标签跳转路由:用a标签跳转路径时,要在href的路径前加 #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<!-- 1.导入vue-router.js后,会在vue中注册一个VueRouter-->
<!-- 注意:导入vue-router.js前,先导入vue.js,因为vue-router.js依赖于vue.js-->
<script src="../lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 6.router-link是vue-router提供的元素,根据to属性为routers[] 中的path路径,从而找到对应的组件-->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 7.通过a标签切换路由-->
<!-- 注意:需要在href中加 # -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 5.router-view是vue-router提供的元素,router对应的组件会显示到改元素中-->
<router-view></router-view>
</div>
<script>
// 2.创建组件模板
// 2.1 登录组件模板
const login = { template: '<h1>登录组件</h1>' }
// 2.2 注册组件模板
const register = { template: '<h1>注册组件</h1>' }
// 3.创建VueRouter实例,定义路由
// 注意:路由通过routes: []定义,这是一个数组,数组中的元素是对象,每个对象有两个属性:path和component
// path: 代表监听的url地址
// component: 代表path地址对应的组件模板,注意:是组件模板,而不是组件,不能是字符串
const router = new VueRouter({
routes: [
{path: '/login', component: login},
{path: '/register', component: register}
]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router // 4.将路由交给Vue实例,vm会监听url的变化,根据url找到对应的组件,然后渲染到页面中
})
</script>
</body>
</html>
三、重定向
与前面代码一样,只是在路由实例中的routes中添加了一个对象{path: ‘/’, redirect: ‘/login’}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<!-- 1.导入vue-router.js后,会在vue中注册一个VueRouter-->
<!-- 注意:导入vue-router.js前,先导入vue.js,因为vue-router.js依赖于vue.js-->
<script src="../lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 6.router-link是vue-router提供的元素,根据to属性为routers[] 中的path路径,从而找到对应的组件-->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 7.通过a标签切换路由-->
<!-- 注意:需要在href中加 # -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 5.router-view是vue-router提供的元素,router对应的组件会显示到改元素中-->
<router-view></router-view>
</div>
<script>
// 2.创建组件模板
// 2.1 登录组件模板
const login = { template: '<h1>登录组件</h1>' }
// 2.2 注册组件模板
const register = { template: '<h1>注册组件</h1>' }
// 3.创建VueRouter实例,定义路由
// 注意:路由通过routes: []定义,这是一个数组,数组中的元素是对象,每个对象有两个属性:path和component
// path: 代表监听的url地址
// component: 代表path地址对应的组件模板,注意:是组件模板,而不是组件,不能是字符串
const router = new VueRouter({
routes: [
{path: '/', redirect: '/login'}, // 路由的重定向!!!
{path: '/login', component: login},
{path: '/register', component: register}
]
})
const vm = new Vue({
el: '#app',
data: {},
methods: {},
router // 4.将路由交给Vue实例,vm会监听url的变化,根据url找到对应的组件,然后渲染到页面中
})
</script>
</body>
</html>
更新时间:2019-12-22