07:vue定义路由

时间:2024-04-06 20:06:01

1.1 定义路由

  1、说明

      1. 路由是单页面应用程序(SPA)的关键,Vue提供过来路由插件,使用这个路由就要安装这个插件

      2. 安装: npm install vue-router

      3. 依赖于vue文件,所有要优先引入vue

      4. 引入路由之后,我们就可以基于组件+路由实现单页面应用程序开发

      5. 路由使用官网:  https://router.vuejs.org/zh-cn/

  2、路由作用

      1.  定义组件分成三步:1 定义组件容器元素, 2 定义组件类, 3 注册组件

      2. 当使用路由的时候,这三步就抽象成一步,我们只需要定义一个组件类参数对象即可

      3. 所以使用路由,让我们定义组件变得简单了,这里的组件对象,只能被路由使用

  3、使用路由分成以下三步

    1. 第一步 定义路由规则

        1. var routes = [{}, {}],每一个参数代表一个路由对象
        2. path定义规则;name定义路由名称;component 表示路由的组件:这里使用组件对象

    2. 第二步 实例化路由对象

        1. 实例化时候,我们要添加路由规则

    3. 第三步 在vue实例化对象中,注册路由

        1. 第一件事 注册路由

        2. 第二件事 定义路由渲染的容器(在模板中) router-view,渲染的时候,router-view会自动删除

注:在访问的url后面加上 #/home、#/detail、#/list 就会显示对应的组件内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'<h1>home</h1>'
};
var List = {
template:'<h1>list {{msg}}</h1>',
data:function () {
return {
msg: 'hello'
}
}
};
var Detail = {
template:'<h1>detail</h1>',
}; // 第一步:定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home
},
{
path:'/list',
name:'list',
component:List
},
{
path:'/detail',
name:'detail',
component:Detail
},
]; // 第二步:实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步:在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>

路由基本使用

1.2 路由参数

   1、路由参数说明

      1. 一个 ‘’/” 将路由切割成一个一个模块,这些模块默认都是静态路由

      2. 静态路由是不能变的,一个规则对应一个路径

      3. 动态路由:一个规则对应多个路径

      4. 例如 /page/:pageNum

        匹配: /page/10, /page/100, /page/hello

        不匹配: /list/10, /page/10/abc

  2、路由参数使用范围

      1. 动态的路由参数是可以捕获的,并且在任何组件中(vue实例化对象),都可以捕获或

      2. 每一个组件实例化对象,都添加了一个$route的参数, 定义在组件实例化对象的原型上。

      3.  通过params属性,即可获取动态路由参数   $route.params.id    (在控制台可以这样获取:app.$route)

      4. 通过query属性,获取query参数   $route.query.word (在控制台可以这样获取:  app.$route.query)

 注:这种定义放法 在url后面加上 #/detail不会访问组件,只有像这样 #/detail/20?word=hello 才可以访问

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Detail = {
template:'<h1>detail --- {{$route.params.id}}---{{$route.query.word}}</h1>',
}; // 第一步:定义路由规则
var routes = [
{
// 多个商品对应一个页面
path:'/detail/:id',
name:'detail',
component:Detail
}
]; // 第二步:实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步:在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>

路由参数

    07:vue定义路由

1.3 嵌套路由

  1、嵌套路由说明

      1. 路由可以嵌套定义。也就是说路由中可以定义其子路由

      2. 分成两步:

        第一步 在路由的模板中,定义router-view元素,定义渲染的容器

        第二步 在路由对象中添加children属性,属性值是数组,

  2、嵌套路由举例

      1. 如果路径后加上  #/home 仅显示home页面组件

      2. 如果路径加上 #/home/search 会同时显示home组价和子组件 search组件中内容

      3. 由于 page子路由中写的是绝对路径 '/page' 所以访问路径变成 #/page 而不用加上父路径home,显示home组件和page组件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <template id="home">
<div>
<h1>home</h1>
<router-view></router-view> <!--第一步:定义子路由渲染的容器-->
</div>
</template> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'#home',
// 添加子路由
};
var Page = {
template: '<h2>page</h2>'
}; // 第一步:定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home,
children:[
{path:'/page',component:Page}, // 如果子路由的路径是绝对路径,结果就是该绝对路径
{path:'search',component:{template:'<h2>search</h2>'}}, // 如果子路由的路径是相对路径,结果就是父路径+子路径
]
}
]; // 第二步:实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步:在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>

嵌套路由

    07:vue定义路由

1.4 路由重定向

  1、说明

      1. 我们可以定义路由对象的path属性是*,此时会匹配所有的路径,

      2. 然后再定义redirect可以将路由重定向到某个路由,实现默认路由的定义

      注意:由于*匹配的广,因此定义在最后面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'<h1>home</h1>'
};
var List = {
template:'<h1>list {{msg}}</h1>',
data:function () {
return {
msg: 'hello'
}
}
};
var Detail = {
template:'<h1>detail</h1>',
}; // 第一步:定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home
},
{
path:'/list',
name:'list',
component:List
},
{
path:'/detail',
name:'detail',
component:Detail
},
{
path:'*',
redirect:'/home' // 重定向
}
]; // 第二步:实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步:在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>

路由重定向

1.5 路由导航:router-link

   1、router-link 标签用法

      1. Vue-router提供了router-link标签元素,可以定义标签导航

      2. 本质上我们可以通过a标签的href来实现指向,但是router-link功能更强大

      3. 标签中可以使用下面三个常用属性:

        1)to指向路径,注意:加上:(v-bind:) 可以使用变量

        2)v-text设置内容,还可以将内容直接写在标签内

        3)tag:定义标签的类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<a href="#/list">列表页</a>-->
<!--<a href="#/detail">详情页</a>-->
<router-link :to="'/list'" v-text="'列表页01'" tag="span"></router-link>
<router-link :to="'/detail'" v-text="'详情页01'"></router-link>
<h1>vue实例化对象</h1>
<router-view></router-view> <!--定义渲染容器-->
</div> <script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script>
var Home = {
template:'<h1>home</h1>'
};
var List = {
template:'<h1>list {{msg}}</h1>',
data:function () {
return {
msg: 'hello'
}
}
};
var Detail = {
template:'<h1>detail</h1>',
}; // 第一步:定义路由规则
var routes = [
{
path:'/home',
name:'home',
component:Home
},
{
path:'/list',
name:'list',
component:List
},
{
path:'/detail',
name:'detail',
component:Detail
},
]; // 第二步:实例化路由对象
var router = new VueRouter({
routes:routes
}); // 第三步:在vue实例化对象中注册路由
var app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>

路由导航