VueRouter — 使用

>[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] ##### 案例 ~~~ ~~~ >[danger] ##### 官网的案例 -- 更加抽离的代码结构 ~~~ ~~~