VueRouter -- 使用 · Vue&&TypeSprict--基础总结

>[success] # VueRouter -- 使用 ~~~ 1.首先引入VueRouter 的js文件，这个文件要在vue.js 下面 2.创建VueRouter对象，在对象中用routes进行规则配置 3.规则中，属性1 是 path，表示监听哪个路由链接地址；属性2 是 component，表示，和path对应的组件 4.component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称 // 创建一个路由对象 var routerObj = new VueRouter({ routes: [ // { path: '/', component: login }, { path: '/', redirect: '/login' }, { path: '/login', component: login }, { path: '/register', component: register } ] }) ~~~ >[danger] ##### 关于redirect -- 解释 ~~~ 1.建议将页面路由匹配规则第一项用redirect，因为用户习惯输入根目录，而不会习惯，使用前端这种哈希路由的方式输入'#',这样用户输入根目录后这样可以直接跳转对应想展示的组件 ~~~ >[danger] ##### 使用步骤 ~~~ 1.导入路由的js 文件 2.创建路由对象 3.在路由对象中创建好路由和路径的对应关系 4.在vue实例中绑定路由对象 5.在页面使用时候用'router-link' 做链接跳转 6.声明'router-view' router-view会根据router-link 组件的连接进行展示对应组件 ~~~ >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login" tag="span">登录</router-link> <router-link to="/register" tag="span">注册</router-link> <router-view></router-view> </div> <template id="login"> <div>登陆页</div> </template> <template id="register"> <div>注册页</div> </template> <script type="text/javascript"> let login = { template:'#login' }; let register = { template:'#register' }; router = new VueRouter({ routes:[ {path:'/', redirect:'/login'}, {path:'/login', component:login}, {path:'/register', component:register}, ] }) var vm = new Vue({ el: "#app", router, // components: { // login, // register, // }, }) </script> </body> </html> ~~~ >[danger] ##### 官网的案例 -- 更加抽离的代码结构 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/foo">Go To Foo</router-link> <router-link to="/bar">Go To Bar</router-link> <router-view></router-view> </div> <script type="text/javascript"> let Foo = {template:'<div>foo</div>'}; let Bar = {template:'<div>bar</div>'}; const routes=[ {path:"/foo", component:Foo}, {path:"/bar", component:Bar}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~