个人总结——vue1.0与vue2.0路由的区别
vue1.0
html部分———— <a v-link="{path:'/home'}">主页<a/> 跳转链接
<router-view></router-view> 显示内容
js部分 ————
1.准备一个根组件var App=Vue.extend();//
2. Home News组件都准备
var Home=Vue.extend({
template:"<h5>我是主页</h5>"
});var News=Vue.extend({
template:"<h5>我是新闻</h5>"
})
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({ 'home':{ component:Home }, 'news':{ component:News } });
//5. 启动路由
router.start(App,'#box');
vue2.0路由
html部分
<router-link to="/home">主页</router-link> 跳转链接
<router-view></router-view> 显示内容
Js部分
1.组件
var Home = {template:"<h3>主页</h3>"};
var News = {template:"<h3>新闻</h3>"};
2.配置路由
const routes = [
{path:"/home",component:Home}; //配置路由指向
{path:"/news",component:News}; //配置路由指向
{path:"*",redirect:"/home"}; //重定向
]
3.生成路由实例
const router = new VueRouter({
routes
})
4.最后挂到vue模块语句上
new Vue({
el:"#app",
router
})
网友评论