VueRouter — 使用
最后更新于:2022-04-02 08:07:52
>[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] ##### 案例
~~~
Examples
登录
注册
Examples
Go To Foo
Go To Bar
~~~
';
登陆页
注册页
~~~
>[danger] ##### 官网的案例 -- 更加抽离的代码结构
~~~