Vue---router
router的作用就不赘述了
主要讲讲Vue中是怎么使用router以及注意事项
路由的简单使用
1.引入路由
使用router,要用到官方的库 vue-router 引入vue-router有2种方式:a.模块加载的方式 b.script标签引入
模块加载:
import Vue from "vue"; import VueRouter from 'vue-router'; //实例化Vue之前,一定要有这一句代码 Vue.use(VueRouter); new Vue({ //code
})
一定要按照以上方式严格书写(套路) Vue..use是vue的全局方法,用于引入vue相关的插件
script标签引入
这个没什么好说的,但注意加载顺序:先vue.js 再 vue-router.js 否则会错 (凡是引入vue插件前,先要引入vue.js)
2.定义组件
<script> var Template = { template:"<p>你好<p>" } </script>
3.定义路由
var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] })
跟创建Vue实例类似(据我观察,好像所有的veu插件都是 new一个实例,然后挂载到vue实例上) 注意routes选项,很容易写成“routers” 该选项有两个2参数:path 指定路由“跳转地址” component指定加载的组件。
4.注入路由
路由需要注入到vue实例中,才能使用
// 定义路由 var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] }) //在Vue实例中注入路由 new Vue({ el:"#app", data:{ name:"dk" }, components:{ 'hello':{ template:"<p>hello</p>" } }, router:routers })
5.在html页面中:
<div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div>
router-link标签会默认渲染成“a标签” to属性指定路由的“跳转”地址
router-view用于呈现组件的内容。
完整实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> //定义组件 var firstCpt = Vue.component('hello',{ template:`<div> <p>{{name}}</p> <button @click="send">点击</button> </div>`, data:function(){ return{ name:"jjk" } }, methods:{ send:function(){ alert('fuck') } } }); // 定义路由 var routers = new VueRouter({ routes:[ { path:"/foo", component:firstCpt } ] }) //在Vue实例中注入路由 new Vue({ el:"#app", data:{ name:"dk" }, components:{ 'hello':{ template:"<p>hello</p>" } }, router:routers }) </script> </html>
动态路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User
组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router
的路由路径中使用『动态路径参数』
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/user/bar">/user/bar</router-link> <router-link to="/user/foo">/user/foo</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> var User = { template: `<div>User {{ $route.params.id }}</div>` } var routers = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }); new Vue({ el: "#app", router: routers }) </script> </html>
『路径参数』使用冒号 :
标记。当匹配到一个路由时,参数值会被设置到 this.$route.params
,可以在每个组件内使用。于是,我们可以更新 User
的模板,输出当前用户的 ID 提醒一下,当使用路由参数时,例如从 /user/foo
导航到 user/bar
,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。验证一下:
当点击链接时, mouted钩子函数只执行了一次。
嵌套路由
实际的项目中,通常是多层嵌套的组件组合而成的,通过url参数对应嵌套的 各层组件
上面的实例 在demo.html中
<div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/bar">Go to bar</router-link> <router-link to="/foo">Go to foo</router-link> </p> <router-view></router-view> </div>
router-view是最顶层的路由,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 <router-view>
。例如,在 User
组件的模板添加一个 <router-view>
:
var User = { template: ` <div>User {{ $route.params.id }}</div> <router-view></router-view> `, mounted:function(){ alert("666"); } }
组件User中存在一个路由,要渲染这个路由,需要在VueRouter中设置 children选项
var routers = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children:[
{
path:"index",
component:Index
},
{
path:"home",
component:Home
}
] }
]
});
children
配置就是像 routes
配置一样的路由配置数组 唯一的区别就是:path选项不需要“/” 这跟angular不同。
完整实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>hello,Vue</h1> <p> <router-link to="/user/bar">/user/bar</router-link> <router-link to="/user/foo">/user/foo</router-link> <router-link to="/user/foo/index">/user/foo/index</router-link> <router-link to="/user/foo/home">/user/foo/home</router-link> </p> <router-view></router-view> </div> </body> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> var User = { template: ` <div> <div>User {{ $route.params.id }}</div> <router-view></router-view> </div> `, mounted:function(){ alert("666"); } }; var Home = { template:` <div> <div>home page</div> <div>User {{ $route.params.id }}</div> </div> ` }; var Index = { template:` <div> <div>index page</div> <div>User {{ $route.params.id }}</div> </div> ` } var routers = new VueRouter({ routes: [ { path: '/user/:id', component: User, children:[ { path:"index", component:Index }, { path:"home", component:Home } ] } ] }); new Vue({ el: "#app", router: routers }) </script> </html>
命名路由
当一个项目中,存在很多路由时,通过一个名称在标志一个路由很更方便 标志一个路由可以在VueRouter中,使用name选项给该路由设置名称
var routers = new VueRouter({ routes: [ { path: '/user/:id', component: User,name:"user", children:[ { path:"index", component:Index }, { path:"home", component:Home } ] } ] });
要链接到一个命名路由,可以给 router-link
的 to
属性传一个对象,该对象接收 name--路由名称 params--url参数(对象的形式)
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
命名视图
有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 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):
const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })