//app.vue中 <template> <div> <!-- 留坑，非常重要 --> <router-view></router-view> </div> </template> <script> export default { data(){ return {} } } </script>
五、vue-router核心要点
1.vue-router如何参数传递
①用name传递参数
在路由文件src/router/index.js里配置name属性
routes: [
{
path: 'https://www.jb51.net/',
name: 'Hello',
component: Hello
}
]
模板里(src/App.vue)用 $router.name 来接收 比如： <p>{{ $router.name}}</p>
②通过 <router-link> 标签中的to传参
这种传参方法的基本语法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
比如先在src/App.vue文件中
<router-link :to="{name:'hi1',params:{username:'jspang'，id:'555'}}">Hi页面1</router-link>
然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1}
最后在模板里(src/components/Hi1.vue)用 $route.params.username 进行接收.
{{$route.params.username}}-{{$route.params.id}}
③vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数。
我们在/src/router/index.js文件里配置路由
{ path:'/params/:newsId/:newsTitle', component:Params }
我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
<template> <div> <h2>{{ msg }}</h2> <p>新闻ID：{{ $route.params.newsId}}</p> <p>新闻标题：{{ $route.params.newsTitle}}</p> </div> </template> <script> export default { name: 'params', data () { return { msg: 'params page' } } } </script>
在App.vue文件里加入我们的 <router-view> 标签。这时候我们可以直接利用url传值了
<router-link to="/params/198/jspang website is very good">params</router-link>
2.单页面多路由区域操作
在一个页面里我们有2个以上 <router-view> 区域，我们通过配置路由的js文件，来操作这些区域的内容
①App.vue文件，在 <router-view> 下面新写了两行 <router-view> 标签,并加入了些CSS样式
<template> <div> <img src="https://www.jb51.net/article/assets/logo.png"> <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link> <router-link :to="{name:'H1'}"><h1>H2</h1></router-link> <router-view></router-view> <router-view/> <router-view/> </div> </template>
②需要在路由里配置这三个区域，配置主要是在components字段里进行
export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'HelloWorld', components: {default: HelloWorld, left:H1,//显示H1组件内容'I am H1 page,Welcome to H1' right:H2//显示H2组件内容'I am H2 page,Welcome to H2' } }, { path: '/h1', name: 'H1', components: {default: HelloWorld, left:H2,//显示H2组件内容 right:H1//显示H1组件内容 } } ] })
上边的代码我们编写了两个路径，一个是默认的‘/'，另一个是‘/Hi'.在两个路径下的components里面，我们对三个区域都定义了显示内容。最后页面展示如下图：
3.vue-router配置子路由(二级路由)
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：
如何实现下图效果(H1页面和H2页面嵌套在主页中)？
①首先用标签增加了两个新的导航链接
<router-link :to="{name:'HelloWorld'}">主页</router-link> <router-link :to="{name:'H1'}">H1页面</router-link> <router-link :to="{name:'H2'}">H2页面</router-link>
②在HelloWorld.vue加入 <router-view> 标签，给子模板提供插入位置
<template> <div> <h1>{{ msg }}</h1> <router-view></router-view> </div> </template>
③在components目录下新建两个组件模板 H1.vue 和 H2.vue 两者内容类似，以下是H1.vue页面内容：